React排序toggle功能不生效，单独排序函数可正常运行如何解决？

问题根因 #

• React的setState是异步更新，你调用setSort(!sort)后，当前函数作用域内的sort值还是更新前的旧值，后续判断逻辑自然会出错
• 你在toggleSort里只是把排序函数返回了，根本没有调用执行，排序逻辑全程没有触发
• 额外优化点：两个排序函数逻辑高度重复，可以合并简化，减少冗余代码

修正后的代码 #

import { useEffect, useState } from 'react';
import {Button} from "reactstrap";

const MovieList = () => {    

  const [movies, setMovies] = useState([])
  // 用语义更清晰的变量名表示升序状态，也可以继续沿用你原来的sort命名
  const [sortAsc, setSortAsc] = useState(true)

  // 合并成一个排序函数，接收方向参数
  const sortByYear = (isAsc) => {
    const sorted = [...movies].sort((a, b) => {
      return isAsc ? a.year.localeCompare(b.year) : b.year.localeCompare(a.year);
    });
    setMovies(sorted);
  }

  const toggleSort = () => {
    // 先计算好新的排序方向
    const newSortAsc = !sortAsc
    setSortAsc(newSortAsc)
    // 直接用新的方向执行排序
    sortByYear(newSortAsc)
  }

  return (
    <div className="container">
      <h1>Movies</h1>
      <hr />
      <div>
        <Button onClick={toggleSort} color="info">{sortAsc ? "切换为降序" : "切换为升序"}</Button>
      </div>
          
      <div>
        <table className="table table-bordered table-striped">
          <thead className="thead-dark">
            <tr>
              <th>Year</th>
              <th>Film Name</th>
              <th>Oscar Winner</th>
              <th>Country</th>
            </tr>
          </thead>
          <tbody>
              {movies.map(movie => (
              <tr key={movie.id}>
              <td>{movie.year}</td>
              <td>{movie.filmName}</td>
              <td>{movie.winner}</td>
              <td>{movie.country}</td>
            </tr>
            ))}
          </tbody>
          </table>
      </div>
    </div>
  )
}

export default MovieList;

你也可以选择更符合React声明式逻辑的写法，用useEffect监听排序状态变化，自动触发排序：

// 放在组件内部即可
useEffect(() => {
  const sorted = [...movies].sort((a, b) => {
    return sortAsc ? a.year.localeCompare(b.year) : b.year.localeCompare(a.year);
  });
  setMovies(sorted);
}, [sortAsc, movies])

const toggleSort = () => {
  setSortAsc(!sortAsc)
}

内容的提问来源于stack exchange，提问作者Simon S.