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

您在寻找类似的东西吗？直播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"
};

Answer 2

您不能通过setFinal(final => [...final, value]);从数组中删除元素。如果值为undefined，则setFinal可以忽略它。请参阅：Delete item from state array in react

带对象数组的Usestate钩子

2 个答案: