使用带有对象数组的状态钩子

Question

出于某种原因，我似乎找不到这个我认为相当简单的任务的答案。我的挑战是我有一个 usestate 数组，它根据用户输入保存多个对象。它可以有用户选择的任意数量，也可以没有。由于某种原因，我无法让它正常工作。

我的意思是，每当我以迄今为止我能够想出的任何方式设置状态(例如：setFinal(final => [...final, value]);(时，它都无法正常工作。当用户在单击时将新对象添加到数组中时，它工作正常，但删除它们，特别是再次从 1 到 0 到 1 会导致状态无效。我的意思是，转到 0 之前的最后一个不会被删除，当您再次开始从 0 添加新对象时，它的状态已经有一个值。

那么，设置状态的正确方法是什么，以便无论您是否在状态中添加或删除对象，它都能正常工作？

希望我已经足够清楚自己解决这个问题。这应该相当简单，但我似乎没有正确理解，谷歌搜索似乎也不起作用。提前感谢任何帮助我的人。

编辑：

需要澄清的地方：

示例对象：

0：Object { id: 484, data: [] }
1：Object { id: 524, data: [] }
2：Object { id: 170, data: (3) […] }

到目前为止，我在设置状态方面尝试过：

setFinal(final => [...final, value]);
setFinal(value);
setFinal(final => value);

无论您添加还是删除，我都需要它工作，将它们全部删除并再次添加，它应该在所有这些条件下都有效。

Answer 1

你看起来像这样吗？现场演示

function App() {
const [arr, setArr] = useState({
numbers: [
{ id: 1, name: "Reactjs" },
{ id: 2, name: "Vuejs" },
{ id: 3, name: "Nodejs" }
]
});
const onclickHandler = event => {
setArr({
...arr,
numbers: [
...arr.numbers,
{
id: Math.floor(Math.random() * 100),
name: `${Math.random()} technology`
}
]
});
};
const deleteIt = item => {
let updated = arr.numbers.filter(a => a.id !== item.id);
setArr({ numbers: updated });
};
return (
<div className="App">
<button onClick={onclickHandler} value="4">
Add
</button>
<ul>
{arr.numbers.map(a => (
<li key={a.id}>
<span>
{a.id}-{a.name}
</span>
<button style={styles} onClick={() => deleteIt(a)}>
X
</button>
</li>
))}
</ul>
</div>
);
}
const styles = {
color: "white",
backgroundColor: "red"
};

Answer 2

您无法通过setFinal(final => [...final, value]);从数组中删除元素 如果值undefined则setFinal忽略它。请参阅： 从 react 中的状态数组中删除项目