如何使用 Hooks 设置状态？

Question

我有一个这样的对象数组：

var fruitsArray = [{ fruit: 'Apple', count: 0 },{fruit: 'Banana', count: 0 },{fruit: 'Grapes', count: 0}]

现在我有一个按钮，我想在每个水果可见时增加它的数量。因此，每按一次按钮都会增加相应水果的计数值并存储。

目前，我正在做：

 const [count, setCount] = useState(fruitsArray);

 const fruitsCount = () => {
      console.log(fruitsArray[selected].count += 1)
      setCount({
        ...fruitsArray,
        count : fruitsArray[selected].count + 1
      })
    }

我猜是这个 fruitsCount 函数的问题。可能是什么问题？

Answer 1

缺少一些完整的上下文，但这是您提供的代码的一种方法。

它将呈现如下内容：

var fruitsArray = [
  { fruit: "Apple", count: 0 },
  { fruit: "Banana", count: 0 },
  { fruit: "Grapes", count: 0 }
];

function App() {
  const [fruits, setCount] = React.useState(fruitsArray);

  const updateCount = index => {
    setCount(
      fruits.map((fruit, i) => {
        if (index === i) {
          // Create a new object to avoid mutating anything in state
          return {
            ...fruit,
            count: fruit.count + 1
          };
        } else {
          // Reuse the existing fruit object since it didn't change
          return fruit;
        }
      })
    );
  };

  return (
    <>
      {fruits.map((fruit, index) => (
        <button key={fruit.fruit} onClick={() => updateCount(index)}>
          {fruit.fruit}: {fruit.count}
        </button>
      ))}
    </>
  );
}