javascript - 如何在 React Hooks 中触发从子级到父级的状态更改？

Question

这些位于父组件中...

   const [setQuantity, quantity] = useState(1);

   const handleSetQuantity = e => {
      console.log(e.target.value);
      console.log("TEST");

      setQuantity(e.target.value);
    };

我将它传递给子组件，如下所示:

<SomeChildComponent
    setQuantity={e => handleSetQuantity(e)}
    quantity={quantity}
/>

里面:

<select
    onChange={e => props.setQuantity(e)}
    value={props.quantity}
    >
    <option value={1}>1</option>
    <option value={2}>2</option>
    <option value={3}>3</option>
</select>

自从出现“TEST”日志后，我就可以从 child 那里访问该功能。然而它告诉我:

Uncaught TypeError: setQuantity is not a function

我做错了什么？如果是这样，从子组件触发的操作更改父状态的正确方法是什么？

Answer 1

您正在传递一个已执行的函数，并且应该传递引用。

<SomeChildComponent
    setQuantity={handleSetQuantity}
    quantity={quantity}
/>

另外，

const [setQuantity,数量] = useState(1);

你交换了值和函数的位置，应该是:

const [数量，setQuantity] = useState(1);