问当与其他数组数据一起推入状态数组时，按索引添加和删除项React

EN

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

interface Idata {
  name: string;
  values: number[];
}

const initialData: Idata[] = [
  {
    name: 'Title 1',
    values: [98, 15, 7, 8],
  },
  {
    name: 'Title 2',
    values: [44, 5, 7, 8],
  },
  {
    name: 'Title 3',
    values: [5, 7, 8, 9],
  },
  {
    name: 'Title 4',
    values: [76, 88, 9, 5],
  },
];

const addData: Idata[] = [
  {
    name: 'Title 5',
    values: [98, 15, 7, 8],
  },
  {
    name: 'Title 6',
    values: [44, 5, 7, 8],
  },
  {
    name: 'Title 7',
    values: [5, 7, 8, 9],
  },
  {
    name: 'Title 8',
    values: [76, 88, 9, 5],
  },
];

const App: React.FunctionComponent = () => {
  const [tag, setTag] = React.useState<Idata[]>(initialData);

  return (
    <React.Fragment>
      <div className="intial-data">
        {tag?.map((inner: Idata, index: number) => {
          return <div key={index}>{inner.name}</div>;
        })}
      </div>
      <br />
      <div>
        {addData?.map((inner: Idata, index: number) => {
          return (
            <React.Fragment key={index}>
              <div>
                {inner.name}{' '}
                <button
                  onClick={() =>
                    setTag((oldArray) => [...oldArray, addData[index]])
                  }
                >
                  Add
                </button>
                <button
                  onClick={() =>
                    setTag((oldArray) => oldArray.splice(index, 1))
                  }
                >
                  Remove
                </button>
              </div>
            </React.Fragment>
          );
        })}
      </div>
    </React.Fragment>
  );
};

render(<App />, document.getElementById('root'));