React中选择下拉选项后如何按日期降序排序数组并遍历内容

我来帮你搞定这个问题～你的代码里存在几处语法和逻辑问题，我会先指出问题所在，再给出修正后的完整实现。

原代码的主要问题 #

• State初始化缺失：没有在constructor里初始化state，导致后续操作时this.state可能未定义
• setState语法错误：this.setState={ ... } 是错误写法，正确的是this.setState({ ... })，而且不能在setState内部直接定义变量
• 直接修改原数组：sort()方法会直接修改原数组，应该先复制一份再排序，避免污染原始数据
• this指向问题：change方法没有绑定this，触发onChange时会导致this指向错误
• select绑定错误：select的value没有正确绑定state，option的value写法错误（不需要用花括号包裹字符串）
• 排序逻辑冗余：先升序再reverse，其实可以直接在排序函数里实现降序，更高效

修正后的完整代码 #

import React, { Component } from 'react';

// 假设Widget组件是已定义的
const Widget = ({ data }) => <div>{data.id} - {data.name}</div>;

class App extends Component {
  constructor(props) {
    super(props);
    // 初始化state
    this.state = {
      fetchData: [], // 存储原始数据，避免被排序修改
      sortedData: [], // 存储排序后的数据，用于渲染
      selectedSort: '' // 记录当前选择的排序方式
    };
    // 绑定change方法的this指向
    this.change = this.change.bind(this);
  }

  componentDidMount() {
    // 模拟获取数据
    const mockData = [
      { id: "2017-01-01", name: "活动1" },
      { id: "2017-01-05", name: "活动2" },
      { id: "2016-12-28", name: "活动3" }
    ];
    // 初始时原始数据和排序后数据一致
    this.setState({
      fetchData: mockData,
      sortedData: mockData
    });
  }

  change(event) {
    const selectedValue = event.target.value;
    const { fetchData } = this.state;

    let sortedResult = [...fetchData]; // 复制原始数组，避免修改原数据

    if (selectedValue === 'date') {
      // 直接按日期降序排序，无需reverse
      sortedResult.sort((a, b) => new Date(b.id).getTime() - new Date(a.id).getTime());
    } else if (selectedValue === 'impact') {
      // 这里可以添加按Impact排序的逻辑，示例中保持原顺序
      sortedResult = [...fetchData];
    }

    // 更新state
    this.setState({
      selectedSort: selectedValue,
      sortedData: sortedResult
    });
  }

  render() {
    const { sortedData, selectedSort } = this.state;
    return (
      <div>
        <select id="lang" onChange={this.change} value={selectedSort}>
          <option value="date">Date（降序）</option>
          <option value="impact">Impact</option>
        </select>
        <div className="widget-container">
          {sortedData.map((campaign, index) => (
            <Widget key={index} data={campaign} />
          ))}
        </div>
      </div>
    );
  }
}

export default App;

关键逻辑说明 #

1. 分离原始数据和排序后数据：用fetchData存储原始数据，sortedData存储排序后的结果，避免排序操作修改原始数据
2. 正确绑定this：在constructor里绑定change方法的this，确保触发onChange时能正确访问this.state和this.setState
3. 高效的日期降序排序：直接通过new Date(b.id).getTime() - new Date(a.id).getTime()实现降序，比先升序再reverse更高效
4. select的正确绑定：将select的value绑定到selectedSort，确保选中状态和state同步，option的value直接写字符串即可，无需花括号
5. 遍历排序后的数据：渲染时遍历sortedData，这样选择不同排序选项时，页面会自动更新为对应排序后的内容

内容的提问来源于stack exchange，提问作者Sokratis V