javascript - react -从列表中更改组件的顺序

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