这些在父组件中...
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”日志,因此我可以从子级访问该功能。但是它告诉我:
Uncaught TypeError: setQuantity is not a function
我在做什么错?如果是这样,从子组件触发的操作更改父状态的正确方法是什么?
答案 0 :(得分:4)
您要传递一个已执行的函数,并且应该传递引用。
<SomeChildComponent
setQuantity={handleSetQuantity}
quantity={quantity}
/>
还
const [setQuantity, quantity] = useState(1);
您交换了值和函数的位置,应为:
const [quantity, setQuantity] = useState(1);
答案 1 :(得分:0)
您可以直接通过prop将方法传递给子组件
<SomeChildComponent
{setQuantity}
{quantity}
/>
然后,您的子组件将能够像在父组件中一样使用该方法。