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

Question

我目前有一个父类 (App) 和一个子组件 (FoodItem)。 App 组件映射一个 FoodItem 组件列表。

每个单独的 FoodItem 组件都有一个称为 clickCount 的状态，每次用户单击它时都会递增。但是，我需要我的 App 组件中的重置按钮将地图中所有 FoodItem 组件的 FoodItem 状态重置为 0 onClick。

对此的任何帮助将不胜感激。

更新 - 我已经设法获得重置按钮来更新 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>
    );
  }
}

Answer 1

您应该根据反应 docs 提升状态。当两个子级影响相同的状态（重置按钮和 clickCount）时，应该将状态提升到包含这两个子级的父级。所以你的计数应该存储在父级中。

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

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

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

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

在孩子中包括：

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

这是使用带有函数组件的钩子和 useEffect 来在每次 prop resetCount 更改时运行一个事件。

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

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