如何在我的 React 应用程序中将状态从 Child 提升到 Parent？答案

【问题标题】：How can I lift up the state from Child to Parent in my React app?如何在我的 React 应用程序中将状态从 Child 提升到 Parent？
【发布时间】：2020-07-27 04:33:42
【问题描述】：

我需要将 Child 组件的状态提升到 Parent 才能在 resetTotals() 函数中重置它。地图中的每个子组件都有一个点击计数器，因此需要在父组件 onClick 内重置。

我怎样才能传递状态？

//父功能组件

function Parent() {
  const [calorieCount, setCalorieCount] = useState(0);
  const [vitaminACount, setVitaminACount] = useState(0);
  const [vitaminDCount, setVitaminDCount] = useState(0);

  function updateTotals(calories = 0, vitaminA = 0, vitaminD = 0) {
    setCalorieCount(prevCalorieCount => Math.round(prevCalorieCount + calories));
    setVitaminACount(prevVitaminACount => Math.round((prevVitaminACount + vitaminA) * 100) / 100);
    setVitaminDCount(prevVitaminDCount => Math.round((prevVitaminDCount + vitaminD) * 100) / 100);
  }

  function resetTotals() {
    setCalorieCount(0);
    setVitaminACount(0);
    setVitaminDCount(0);
  }

  return (
    <div className="App">

      <main className="products-grid flex flex-wrap">
        {FoodCards.map((item, i) => {
          return <Child 
          key={item.id} 
          name={item.name} 
          img={item.img}
          calories={item.calories} 
          vitamin_a={item.vitamin_a} 
          vitamin_d={item.vitamin_d}
          updateTotals={updateTotals} />
        })}
      </main>

      <footer>
        <div
        className="reset" 
        onClick={() => resetTotals()}
        >Reset</div>
      </footer>
    </div>
  );
}
export default App

// 子功能组件

const Child = (props) => {
      const [clickCount, setClickCount] = useState(0);
    
      function handleUpdateTotals(calories, vitamin_a, vitamin_d) {
        props.updateTotals(calories, vitamin_a, vitamin_d);
        setClickCount(prevClickCount => prevClickCount + 1);
      }
    
      return (
        <div 
        className="product"
        onClick={() => handleUpdateTotals(props.calories, props.vitamin_a, props.vitamin_d)}
        >
          <p>{props.name}</p>
          <p>{clickCount > 0 ? <p>Selected: {clickCount}</p> : <p>Not Selected</p>}</p>
          <img src={props.img} alt="" />
        </div>
      );
    }

【问题讨论】：

你在哪里叫孩子在父母？
{FoodCards.map((item, i) => { return })}

标签： javascript reactjs ecmascript-6

【解决方案1】：

您已经在该代码中从子级更新父级状态。

您将回调函数作为属性传递，然后通过props.updateTotals() 调用它。然后它将在父级中运行updateTotals 函数。

对重置总数执行相同操作：将方法作为道具传入，并从子级调用。

【讨论】：