我可以在子组件的父组件中设置状态吗？

Question

我想稍微清理一下我的代码，所以我不想拥有一个长组件，而是想创建子组件。

在我的Parent中，我有一些状态我想更新Child中的onClick 。

家长：

const [plan, setPlan] = useState('myPlan');
const [months, setMonths] = useState('2');
const [price, setPrice] = useState(200);

<PlanSelection props={props}
               item={selectedData}
               itemPlan={plan}
 />

孩子

const PlanSelection = ({ props, item, itemPlan }) => {

    function handleSubsribe() {
        props.setPlan('Subsribe Only');
        props.setPrice(item.price);
        props.setMonths('24+');
    }

    function handlePay() {
        props.setPlan('Pay to Own');
        props.setPrice(item.pay);
        props.setMonths('12-24');
    }

并尝试调用函数（在子组件中）

<button onClick={handleSubscribe} />
<button onClick={handlePay} />

单击其中一个按钮后，使用上面的代码会引发错误：

类型错误：props.setPlan 不是 function

但是如果我不传递 props，setPlan、setPrice，.... 将是未定义的。 有办法处理吗？

Answer 1

问题

<PlanSelection props={props}
               item={selectedData}
               itemPlan={plan}
 />

您没有将setPlan传递给孩子，您只传递了props ，它与props state ， selectedData我不确定那是什么，还有plan ，它是state 。 总之，您没有将有关setState的任何信息传递给子组件

---

解决方案

家长

const [plan, setPlan] = useState('myPlan');

<PlanSelection 
  setPlan={setPlan}
 />

孩子

const PlanSelection = ({ setPlan }) => {

    function handleSubsribe() {
        setPlan('Subsribe Only');
    }

    function handlePay() {
        setPlan('Pay to Own');
    }

在上面的代码中，我仅使用setPlan作为示例向您展示了如何从子组件设置状态，您可以将相同的逻辑应用于setState 。

更新刚刚意识到我犯了一个你应该注意的错误。 在你的子组件中你有({ setPlan }) ，这被称为解构，这是你从props中提取setPlan ，因此在你的子组件中，你不应该访问props.setPlan而是setPlan 。 再看看上面的答案

Answer 2

您可以简单地将您的 setState 函数作为道具传递给您的子组件。 一种简单的方法是：

const [plan, setPlan] = useState('myPlan');
const [months, setMonths] = useState('2');
const [price, setPrice] = useState(200);

<PlanSelection setPlan={setPlan}
               item={selectedData}
               itemPlan={plan}
 />

在这里，您将能够从子组件更新计划 state。

Answer 3

如果你想将所有的 setStates 传递给孩子，试试这个。

const handlers = {setPlan, setMonths, setPrice}
    <PlanSelection handlers={handlers}
                   item={selectedData}
                   itemPlan={plan}
     />

const PlanSelection = ({ handlers, item, itemPlan }) => {

您可以将setPlan用作handlers.setPlan而不是props.setPlan 。