Javascript 如何从React中的父类更新子组件状态？

我目前有一个父类（App）和一个子组件（FoodItem）。应用程序组件映射FoodItem组件的列表

每个单独的FoodItem组件都有一个名为clickCount的状态，用户每次单击该组件时，该状态都会增加。但是，我需要我的应用程序组件中的重置按钮，以便在单击地图中所有FoodItem组件时将FoodItem状态重置为0

在此方面的任何帮助都将不胜感激

更新-我已设法获得重置按钮来更新FoodItem子组件，但是它只更新映射列表中的最后一项，而我需要它更新列表中的所有项

    class App extends React.Component {

  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.state = {
      foods: FoodCards,
      calorieCount: 0,
      vitaminACount: 0,
      vitaminDCount: 0,
    };
    this.increment = this.increment.bind(this);
  }

  increment = (calories = 0, vitaminA = 0, vitaminD = 0) => {
    this.setState({
      calorieCount: Math.round(this.state.calorieCount + calories),
      vitaminACount: Math.round((this.state.vitaminACount + vitaminA) * 100) / 100,
      vitaminDCount: Math.round((this.state.vitaminDCount + vitaminD) * 100) / 100
    });
  };

  resetCounters = () => {
    this.myRef.current.resetClickCount();
    this.setState({
      calorieCount: 0,
      vitaminACount: 0,
      vitaminDCount: 0,
    });
  };

  render() {

    return (
      <div className="App">
  
        <main className="products-grid flex flex-wrap">
  
        {this.state.foods.map((item, i) => {
          return <FoodItem key={item.id} ref={this.myRef} name={item.name} img={item.img} calories={item.calories} vitamin_a={item.vitamin_a} vitamin_d={item.vitamin_d} updateTotals = {this.increment} />
        })}
  
        </main>

        <footer>
          <div className="reset" onClick={() => this.resetCounters()}>Reset</div>
        </footer>
  
      </div>
    );
  }
}

export default App;

class FoodItem extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      clickCount: 0
    };
  }

  handleUpdateTotals = (calories, vitamin_a, vitamin_d) => {
    this.props.updateTotals(calories, vitamin_a, vitamin_d);
    this.clickIncrement();
  }

  clickIncrement = () => {
    this.setState({
      clickCount: this.state.clickCount + 1
    });
  }

  resetClickCount = () => {
    this.setState({
      clickCount: 0
    });
  }

  render() {
    return (
      <div className="product" onClick={() => this.handleUpdateTotals(this.props.calories, this.props.vitamin_a, this.props.vitamin_d)}>
        <p>{this.props.name}</p>
        {this.state.clickCount > 0 ? <p>Selected: {this.state.clickCount}</p> : <p>Not Selected</p>}
        <img src={this.props.img} alt="" />
      </div>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.myRef=React.createRef（）；
此.state={
食品：食品卡，
卡路里数：0，
维生素含量：0，
数字：0，
};
this.increment=this.increment.bind（this）；
}
增量=（卡路里=0，维生素A=0，维生素D=0）=>{
这是我的国家({
卡路里计数：Math.round（this.state.carriecount+carries），
维生素A计数：数学四舍五入（（this.state.vitaminACount+vitaminA）*100）/100，
vitaminDCount:Math.round（（this.state.vitaminDCount+vitaminD）*100）/100
});
};
重置计数器=（）=>{
这个.myRef.current.resetClickCount（）；
这是我的国家({
卡路里数：0，
维生素含量：0，
数字：0，
});
};
render（）{
返回(
{this.state.foods.map（（项目，i）=>{
返回
})}
此参数为.resetCounters（）}>Reset
);
}
}
导出默认应用程序；
类FoodItem扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
点击次数：0
};
}
handleUpdateTotals=（卡路里、维生素a、维生素d）=>{
这个.props.updateTotals（卡路里、维生素a、维生素d）；
单击此项。单击增量（）；
}
单击增量=（）=>{
这是我的国家({
clickCount:this.state.clickCount+1
});
}
重置ClickCount=（）=>{
这是我的国家({
点击次数：0
});
}
render（）{
返回(
this.handleUpdateTotals（this.props.carries，this.props.vitamin_a，this.props.vitamin_d）}>
{this.props.name}

{this.state.clickCount>0？选中：{this.state.clickCount}
：未选中
}
);
}
}

您应该根据react将状态提升。当两个子项影响相同的状态（重置按钮和单击计数）时，该状态应提升到包含这两个子项的父项。因此，您的计数应该存储在父项中

但是。。。要回答您的问题，您可以轻松地执行类似操作，以便在每次单击按钮时触发渲染（但不推荐）：

这是使用带有函数组件的挂钩和

useffect

在每次prop

resetCount

更改时运行事件

对于类，您可以使用传递给子类的ref，如下所示

---

在FoodItem中引入一个属性，例如“reset”，当单击Reste按钮时，将属性值传递为“reset”的true。在FoodItem组件中，如果props.reset===true，则将clickCount设置为0。您应该提升状态并在父组件中保持clickCount。谢谢你。我使用了class和child ref，因为我还不太熟悉如何反应，提升状态是我需要了解的事情。但是，“重置”按钮现在仅更新映射对象中最后一个的状态。。你应该看看这个。每个孩子都需要一个单独的参考号。。。useEffect方法对您很有用-如果您刚刚学习React，为什么不使用功能组件？钩子是新的，反应的方式正在进行中。

const [resetCount, setResetCount] = useState(false);

const resetCountClicked = () => setResetCount(!resetCount);

return 
  <>
    <Child resetCount={resetCount}></Child>
    <button onClick={() => resetCountClicked()}>Reset Count</button>
  </>

useEffect(() => setCount(0), [resetCount]);

const { Component } = React;

class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  onClick = () => {
    this.child.current.resetCount();
  };

  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.onClick}>Reset Count</button>
      </div>
    );
  }
}

  resetCount() {
    this.setState({
      clickCount: 0
    });
  }