我可以在 Child 组件的 Parent 中设置状态吗？

Question

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

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

Parent:

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

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

Child

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

并且只是尝试调用函数（在 Child 组件中）

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

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

TypeError: props.setPlan 不是函数

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

Answer 1

问题

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

你没有把setPlan传给child，你只传了props，props和state没有关系，selectedData，我不确定那是什么，plan，也就是 state。总之，您没有将有关 setState 的任何信息传递给 child component

解决方案

Parent

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

<PlanSelection 
  setPlan={setPlan}
 />

Child

const PlanSelection = ({ setPlan }) => {

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

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

在上面的代码中，我仅使用 setPlan 作为示例向您展示如何从 child 组件 setState，您可以对其余部分应用相同的逻辑。

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

Answer 2

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

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

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

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

Answer 3

如果您想将所有 setState 传递给 child，试试这个。

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

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

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

我可以在 Child 组件的 Parent 中设置状态吗？

Can I setState in Parent from Child component?

javascript

state

reactjs

react-hooks

解决方案