CodeSandbox

Question

假设我有一个从最低到最高的数字列表，并且在加载组件时，我将这些数字显示在列表中。我有一个功能可以对单击按钮时运行的数字进行从高到低的排序，并更新状态。我可以注销新状态，并看到数字已从高到低排序，但是现在我该如何更新子组件，该子组件显示列表以反映此更改？

父母：

render() {
  return (
    <div>
      <List data={this.state.numbers} />
      <button onClick={this.reorder}>Reorder</button>
    </div>
  );
}

孩子：

render() {
  console.log(this.props.data)
  return (
    <div className="community-list">
      {this.props.data && this.props.data.map((value, index) => (
        <li key={index}>{value}</li>
      ))}
    </div>
  );
};

CodeSandbox

Answer 1

请不要更改状态，因为当引用不变时，这可能会导致此类错误，并且由于React引用检查，子组件将无法重新渲染。

此外，当您更新状态时，还必须致电removeAfterDate(): 2 errors At line 145: Expected: [FoodItem: Name2 CatalogueNumber: 1002 ProductionDate: 01/01/2000 ExpiryDate: 01/04/2000 Quantity: 1 ] But got: [FoodItem: Name2 CatalogueNumber: 1002 ProductionDate: 01/01/2000 ExpiryDate: 01/04/2000 Quantity: 1 FoodItem: Name4 CatalogueNumber: 1004 ProductionDate: 01/01/2000 ExpiryDate: 01/02/2000 Quantity: 1 ] At line 147: Expected 1 but got 2

您的数组已经排序，因此不会反映更改，请更改元素的顺序以查看状态更改

.masthead {
  height: 100vh;
  min-height: 100%;
  background:; /* ie 6 cheat */
  background-image: url('http://via.placeholder.com/3024x4032?Placeholder%27');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Sticky Footer Classes */
body
 {
    display: flex;
    flex-direction: column;
}

html, body
 {
height: 100%;
}

#page-content {
    flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: 0;
}

Answer 2

另一种方式：

reorder = () => {    
    this.setState(state=>
      ({
        numbers: state.numbers.sort((a, b) => b - a)
      }),(()=>{
        console.log(this.state.numbers);
      })
      );    
  };

React-更新父状态时重新渲染子组件

CodeSandbox

2 个答案: