React中能否在子组件内调用父组件的setState方法修改父级状态？

1. 你在父组件内定义的setPlan、setPrice、setMonths是当前父组件作用域内的方法，没有挂载到父组件自身的props上，你把父组件的props传给子组件，子组件自然拿不到这几个更新函数。
2. 你给子组件传值时命名了一个叫props的属性，子组件解构时拿到的props只是这个属性的值，和子组件本身的props对象完全是两回事，属于命名混淆。

步骤1：修改父组件传值逻辑 #

显式把需要用到的状态更新函数传递给子组件，不需要传递父组件自身的props：

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

<PlanSelection 
  item={selectedData}
  itemPlan={plan}
  // 显式传递更新函数
  setPlan={setPlan}
  setMonths={setMonths}
  setPrice={setPrice}
/>

步骤2：修改子组件接收逻辑 #

直接解构拿到传递过来的更新函数，直接调用即可：

// 直接解构接收所有传递的属性，包括更新函数
const PlanSelection = ({ item, itemPlan, setPlan, setMonths, setPrice }) => {
  function handleSubscribe() {
    setPlan('Subscribe Only');
    setPrice(item.price);
    setMonths('24+');
  }

  function handlePay() {
    setPlan('Pay to Own');
    setPrice(item.pay);
    setMonths('12-24');
  }
  // 后续渲染逻辑
  return (
    <>
      <button onClick={handleSubscribe} />
      <button onClick={handlePay} />
    </>
  )
}

如果需要传递的更新函数太多，可以把所有更新函数打包成一个对象传递，减少传值的代码量：

• 父组件写法：

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

• 子组件写法：

const PlanSelection = ({ item, itemPlan, stateUpdaters }) => {
  const { setPlan, setMonths, setPrice } = stateUpdaters
  // 后续逻辑和上述一致，不需要修改
}

内容的提问来源于stack exchange，提问作者user15603995