Question

我有一个简单的React组件List，其中包含它呈现的ListItem个组件的数组。 ListItems前面有一个ListHeader组件，单击该组件时应在其下面对ListItems进行排序。我正在尝试创建一个简单的排序功能，以按期望的顺序重新呈现ListItems。

以下是组件：

class List extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      items: this.props.items,
    }
  }

  doSort(col) {
    let sortAsc = this.state.sortCol == col ? !this.state.sortCol : true;
    let sorted = this.state.items.slice().sort((a, b) => {
      if(a.attributes[col] < b.attributes[col]) {
        return sortAsc ? 1 : -1;
      } else if(a.attributes[col] > b.attributes[col]) {
        return sortAsc ? -1 : 1;
      } else {
        return 0;
      }
    });

    this.setState({
      items: sorted,
      sortCol: col,
      sortAsc: sortAsc
    });
  }

  render() {
    let items = this.state.items.map((item, index) => {
      return <ListItem item={item} key={index} />
    });

    return(
      <div>
        <ListHeader item={this.state.items[0]} handleSort={this.doSort.bind(this)} />
        {items}
      </div>
    );
  }

}

调用doSort时，它将对列表中的组件进行排序，并将this.state.items设置为新的排序数组。根据调试器的说明，此操作正确完成，随后调用render()。但是，页面上呈现的组件的顺序没有改变。

有什么主意为什么用排序数组设置状态不会改变被引用组件的呈现顺序？

Answer 1

您应该避免将索引用作键，因为它被视为反模式。

更多内容可在此处阅读。 https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

反应-从列表中更改组件的顺序

1 个答案: