我想從推入狀態陣列的陣列中洗掉專案。我可以添加，但洗掉在反應方面對我來說有點混亂。當前的洗掉功能不起作用，因為它洗掉了所有元素，但洗掉了第一個元素？我只想能夠洗掉添加的資料，例如 5,6,7,8
Stackblitz：https ://react-ts-p6iwoh.stackblitz.io
到目前為止的代碼：
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'));
uj5u.com熱心網友回復：
關于以下評論：
添加idto 后IData，您可以使用filter，例如：
onClick={() =>
setTag((oldArray) => {
return oldArray.filter(item => item.id !== inner.id);
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/353983.html
標籤：javascript 数组 反应