在 React 中对对象数组进行排序

Question

我是 React 新手，我正在尝试按名称对对象数组进行升序和降序排序。我还希望在 DOM 呈现后立即开始排序，因此我使用 componentDidMount()。

我遇到的问题是当您从下拉列表中选择“Z - A”选项时。由于某种原因，排序功能第一次不起作用，然后当您选择“A - Z”时，它会以相反的顺序排序。有什么想法我哪里出错了吗？几个星期以来一直在这个问题上，我完全被难住了。

对于 componentDidMount()，您应该调用这样的自定义函数还是我应该以不同的方式进行操作？

谢谢

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.updateValue = this.updateValue.bind(this);
        this.sortData = this.sortData.bind(this);
        this.state = {
            people: [
                { name: 'Abi', age: 18 },
                { name: 'Britney', age: 22 },
                { name: 'Carol', age: 52 },
                { name: 'Danni', age: 17 },
            ],
            sortBy: 'AZ'
        }
    }
    sortData() {
        if (this.state.sortBy === 'AZ') {
            this.setState((prevState) => {
                return {
                    people: prevState.people.sort((a, b) => a.name > b.name ? 1 : -1)
                }
            });
        }
        else if (this.state.sortBy === 'ZA') {
            this.setState((prevState) => {
                return {
                    people: prevState.people.sort((a, b) => b.name > a.name ? 1 : -1)
                }
            });
        }
    }
    updateValue(event) {
        const value = event.target.value;
        console.log(value);

        this.setState(() => {
            return {
                sortBy: value
            }
        });

        this.sortData();
    }
    componentDidMount() {
        this.sortData();
    }
    render() {
        return (
            <div>
                <p>{ this.state.sortBy }</p>
                <select value={ this.state.sortBy } onChange={ this.updateValue }>
                    <option value="AZ">A - Z</option>
                    <option value="ZA">Z - A</option>
                </select>
                <ul>
                    { this.state.people.map((person) => <li key={person.name}>{ person.name }</li>) }
                </ul>
            </div>
        );
    }
};

const root = document.querySelector('#appRoot');

ReactDOM.render(<App/>, root);

Answer 1

我改进了您的代码。试试这个

import "./styles.css";
import React, { Component } from "react";
export default class App extends Component {
  state = {
    people: [
      { name: "Abi", age: 18 },
      { name: "Britney", age: 22 },
      { name: "Carol", age: 52 },
      { name: "Danni", age: 17 }
    ],
    sortBy: "AZ"
  };
  sortData = (value) => {
    if (value === "ZA") {
      this.setState((prevState) => ({
        people: prevState.people.sort((a, b) => (b.name > a.name ? 1 : -1))
      }));
    } else if (value === "AZ") {
      this.setState((prevState) => ({
        people: prevState.people.sort((a, b) => (a.name > b.name ? 1 : -1))
      }));
    }
  };
  updateValue = (event) => {
    const { value } = event.target;
    this.setState(() => ({ sortBy: value }));
    this.sortData(value);
  };
  componentDidMount() {
    this.sortData();
  }
  render() {
    const { sortBy, people } = this.state;
    return (
      <div>
        <p>{sortBy}</p>
        <select value={sortBy} onChange={this.updateValue}>
          <option value="AZ">A - Z</option>
          <option value="ZA">Z - A</option>
        </select>
        <ul>
          {people.map((person) => (
            <li key={person.name}>{person.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

Live working demo

Answer 2

像这样使用它，排序后您的状态正在更新，这就是您看到排序错误的原因。

updateValue(event) {
    const value = event.target.value;
    console.log(value);

    this.setState({sortBy: value},()=>{
      this.sortData();
    });
}