使用对象数组的 Usestate 钩子答案

【问题标题】：Usestate hook with object arrays使用对象数组的 Usestate 钩子
【发布时间】：2020-01-31 10:41:30
【问题描述】：

由于某种原因，我似乎无法为这个我相信的相当简单的任务找到答案。 我的挑战是我有一个 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);

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

【问题讨论】：

请显示代码

标签： reactjs react-hooks

【解决方案1】：

你看起来像这样吗？直播Demo

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"
};

【讨论】：

【解决方案2】：

你不能通过setFinal(final => [...final, value]);从数组中删除元素如果值是undefined然后setFinal忽略它。请看：Delete item from state array in react

【讨论】：