使用 React 钩子更新数组

Question

我从根本上误解了 React 钩子，尤其是 useState 函数。为什么下面的代码不更新旧数组的索引，而是将trick的值设置为1？我了解如何使用 React 钩子将新项目推送到数组中，但是如何更新现有值？

const [trick, modifyTrick] = useState([null, null, null, null]);

const identityTrick = () => {
    modifyTrick(oldTrick => oldTrick) //works
}

const updatedTrick = () => {
    modifyTrick(oldTrick => oldTrick[0] = 1) //sets the entire value of trick to 1
}

Answer 1

如果您提供modifyTrick 一个函数，则返回值将是trick 的新值。
您的函数的返回值为 1，这就是为什么 trick 设置为 1。

oldTrick[0] = 1 //this expression returns 1.

在您的 modifyTrick 函数中修改 oldTrick 数组，然后将其返回：

const updatedTrick = () => {
    modifyTrick(oldTrick => {
       oldTrick[0] = 1

       return oldTrick;
    });
};

Answer 2

试试这个

  const updatedTrick = () => {
    modifyTrick(oldTrick => {
      let newTrick = [...oldTrick];
      newTrick[0] = 1;
      return newTrick;
    })
  }

Answer 3

你也可以这样做：

const updateTrick = () => {
    modifyTrick(oldTrick => {
      oldTrick[0] = 1;
      return oldTrick;
    });
};