Question

我正在使用React使用underscore.js对表进行排序，但是排序后的数据与原始数据一起添加到了表的底部。我只需要在我的组件中呈现已排序的表。实现此目的的正确方法是什么？

 class Players extends React.Component {
   constructor() {
     super();
     this.state = { players:[]};
   }

   componentDidMount() {
     fetch('http://localhost:5000/players')
     .then((data) => data.json())
     .then((data) => this.setState( { players: data } ));
   }

   sortByCode = () => {
     this.setState( { "players": _.sortBy(this.state.players,'TEAMCODE')});
   }
 render() {
   return (
    <table border={1}>
      <tbody>
        <tr>
          <th onClick={this.sortByCode}>Code</th>
          <th>Name</th>
        </tr>
        {this.state.players.map( (item) => {
          return 
            <tr key={item.TEAMCODE}>
              <td><img height={20} width ={20} 
       alt="pics" src={'/logos/' + item.TEAMCODE + '_logo.svg'}></img> 
       </td>
              <td>{item.TEAMCODE}</td>
              <td>{item.NAME}</td></tr>;
        })}
        </tbody>
    </table>
 )};

Answer 1

不建议将索引用作键（请参见ReactJS documentation）

我建议您找到数据集的唯一键，该键似乎是TEAMCODE和NAME的组合，因此您应将代码替换为：

<tr key={item.TEAMCODE+item.NAME}>

未排序的表格数据与已排序的数据一起呈现在表格中

1 个答案: