如何使用挂钩设置状态？

Question

I have an array of objects like this :

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

Now I have a button where I want to increase the count of every fruit whenever it's visible. So, every button press will increase the count value of respective fruits and store it.

Currently, I am doing :

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

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

Issue is with this fruitsCount function I guess. What may be the problem?

Answer 1

There is some full context missing, but here is one approach for the code you provided.

It will render something like this:

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>
      ))}
    </>
  );
}