Question

我正在开发一个反应应用程序，用于显示电影数据。我想要通过从下拉列表中进行选择，根据标题从a-z和z-a排序数据。检查以下代码。无法使用此方法正确排序。如我所见 onSorting中存在问题

App.js-

[[[10, 2]], [[10, 2, 2]], [[10, 8, 5]]]

Header.js-这是带有两个选项的下拉框

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sort_term: '', movies: data.movies
    }
    this.onSorting = this.onSorting.bind(this);
  }
  onSorting(e) {
    let term = e.target.value;
    const sortedList = this.state.movies.sort((a, b) => {
      if (a[term] > b[term]) return 1;
      if (b[term] > a[term]) return -1;
      return 0;
    });
    this.setState({ sort_term: term });
    this.setState({ movies: sortedList });
  }


  render() {
    const { movies } = this.state;

    return (
      <div className="App">
        <Header sort_term={this.state.sort_term}
          onSorting={this.onSorting} />

        {movies.length === 0 ?
          <h1>Loading Movies</h1> :
          <Table movies={this.state.movies} />}

      </div>
    );
  }
}

Table.js-

class Header extends Component {
    render() {
        const { sort_term, onSorting } = this.props;

        return (
            <div className="nav">
                <ul className="navLeft">
                    <li >
                        <form >
                            <select value={sort_term}
                                onChange={onSorting}
                                className="searchBar">
                                <option value="Title"> Sort (A - Z)</option>
                                <option value="Title"> Sort (Z - A) </option>
                            </select>
                        </form>
                    </li>
                </ul>
            </div>
        );
    }
}

Answer 1

实际上，您的代码可以正常工作，但是由于您对A-Z进行排序，因此您可能看不到它们之间的区别。只需像这样更改排序功能的相关部分即可：

if (a[term] > b[term]) return -1;
if (b[term] > a[term]) return 1;

编辑：如果您有未排序的数组，则您的代码应该可以工作。我尝试过使用排序列表，这就是为什么我告诉您更改顺序的原因。

const movies = [
  { Title: "poo", Director: "poo" },
  { Title: "foo", Director: "bar" },
  { Title: "zoo", Director: "moo" },
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      sort_term: '', movies,
    }
    this.onSorting = this.onSorting.bind(this);
  }

  
  onSorting(e) {
    let term = e.target.value;
    const sortedList = [...this.state.movies].sort((a, b) => {
      return a[term].localeCompare(b[term]);
    });
    this.setState({ sort_term: term });
    this.setState({ movies: sortedList });
  }


  render() {
    const { movies } = this.state;

    return (
      <div className="App">
        <Header sort_term={this.state.sort_term}
          onSorting={this.onSorting} />

        {movies.length === 0 ?
          <h1>Loading Movies</h1> :
          <Table movies={this.state.movies} />}

      </div>
    );
  }
}

class Header extends React.Component {
  render() {
    const { sort_term, onSorting } = this.props;

    return (
      <div className="nav">
        <ul className="navLeft">
          <li >
            <form >
              <select value={sort_term}
                onChange={onSorting}
                className="searchBar">
                <option value="Title"> Sort (A - Z)</option>
                <option value="Title"> Sort (Z - A) </option>
              </select>
            </form>
          </li>
        </ul>
      </div>
    );
  }
}

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    const list = this.props.movies.map((movie) => (
      <tr key={movie.Title}>
        <td>{movie.Title}</td>
        <td>{movie.Director}</td>
      </tr>
    )
    );

    return (
      <div className="table">
        <table>
          <thead>
            <tr>
              <th>Title</th>
              <th>Director</th>
            </tr>
          </thead>
          <tbody>
            {list}
          </tbody>
        </table>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

但是，您的代码中没有排序方向逻辑。您正在使用相同的排序功能，并且它现在正在进行单向排序。

此外，请勿直接使用状态，因为您正在对其进行突变。使用concat或类似的东西：

const sortedList = [...this.state.movies].sort((a, b) => {
      if (a[term] > b[term]) return -1;
      if (b[term] > a[term]) return 1;
      return 0;
});

更好的是，您可以使用localCompare使排序更可靠。感谢@msbit的评论并指出这一点。

const sortedList = [...this.state.movies].sort((a, b) => {
      return a[term].localeCompare(b[term]);
});

使用下拉列表按字母顺序对a-z和z-a进行排序

1 个答案: