Json 就是把你的状态分成两个状态 功能排行榜（）{ //将点初始化为我们传入的数据 常数[点，设定点]=使用状态（点）； const[sortBy，setSortBy]=使用状态（sortBy）； //更改排行榜使用的排序方法 const changeSortB

就是把你的状态分成两个状态

功能排行榜（）{
//将点初始化为我们传入的数据
常数[点，设定点]=使用状态（点）；
const[sortBy，setSortBy]=使用状态（sortBy）；
//更改排行榜使用的排序方法
const changeSortBy=（事件）=>{
var newSort=event.target.value；
//根据选择值对数据进行不同的排序
交换机（新闻端口）{
案例“从头到尾”：
sortDescending（“积分”，“从第一到最后”）；
打破
案例“z-to-a”：
sortDescending（“树名”，“z-to-a”）；
console.log（state.points.treePoints）；//记录不正确，仍然记录与“first to last”中相同的数组
打破
违约：
sortDescending（“积分”，“从第一到最后”）；
}
//使用新状态重新渲染组件
setSortBy（newSort）；
}
/*将排行榜状态更新为按降序排列*/
常量排序结果=（方面，排序方法）=>{
console.log（sortMethod）；//正确记录
//按降序对数据进行排序
让sortedPoints=[…state.points.treePoints].sort（（tree1，tree2）=>{
if（tree1[aspect]>tree2[aspect]）{return-1；}
if（tree1[aspect]{
sortDescending（“积分”，“从第一到最后”）；
} 
,[]);
//用于渲染排行榜正文的属性
var秩=0；
const sortedData=点；
/*基本上所有活动树的第一棵树都具有顶级*/
常量lbBody=sortedData.treePoints.map（（sortedData）=>{
返回(
数据激活&&
);
});
返回(
{/*允许用户按不同方法排序*/}
排序方式：
从头到尾
Z到A
{/*包含已排序内容的表*/}
{lbBody}
);
}
导出默认排行榜；

谢谢！另外，需要注意的是，删除changeSortBy末尾的setState会使其按预期更新，这也会起作用，因为您在sortDescending中更新了sortBy，但其他细节对于将来的使用很重要：-）

import React, { useState, useEffect } from 'react';
import './Leaderboard.css';
import LbRow from '../../components/LbRow/LbRow'; /* A row in the leaderboard*/
import points from '../../data/tree-points.json';

function Leaderboard() {
    // Initialize the points as the data that we passed in
    const [state, setState] = useState({
         points: points,
         sortBy: "first-to-last"
    });

    // Changes the sort method used by the leaderboard
    const changeSortBy = (event) => {
        var newSort = event.target.value;

        // Sorts the data differently depending on the select value
        switch(newSort) {
            case "first-to-last":
                sortDescending("points","first-to-last");
                break;
            case "z-to-a":
                sortDescending("tree_name","z-to-a");
                console.log(state.points.treePoints); // Logs incorrectly, still logs the same array as in "first-to-last"
                break;
            default:
                sortDescending("points","first-to-last");
        }

        // Re-renders the component with new state
        setState({
            points: state.points,
            sortBy: newSort
        });

    }

    /* Updates the leaderboard state to be in descending point order */
    const sortDescending = (aspect, sortMethod) => {

        console.log(sortMethod); // Logs correctly

        // Sorts the data in descending points order
        let sortedPoints = [...state.points.treePoints].sort((tree1, tree2) => {
            if (tree1[aspect] > tree2[aspect]) { return -1; }
            if (tree1[aspect] < tree2[aspect]) { return 1; }
            return 0;
        });

        // Actually updates the state
        setState({
            points: {
                ...state.points,
                treePoints: sortedPoints
            },
            sortBy: sortMethod
        });

        console.log(sortedPoints); // Logs correctly

    };

    /* Calls sortLb on component mount */
    useEffect(() =>{
            sortDescending("points", "first-to-last");
        } 
    ,[]);

    // Attributes used for rendering the leaderboard body
    var rank = 0;
    const sortedData = state.points;

    /* Basically all the active trees with the first tree having the top rank */
    const lbBody = sortedData.treePoints.map((sortedData) => {
        return (
            sortedData.active &&
            <LbRow rank={++rank} tree_name={sortedData.tree_name} points={sortedData.points} active={sortedData.active}/>
        );
    });

    return (
        <div>
            <div className="filters">
                {/* Allows user to sort by different methods */}
                <label htmlFor="sortBy">Sort by:</label>
                <select name="sortBy" className="sortBy" value={state.sortBy} onChange={changeSortBy}>
                    <option value="first-to-last">First to Last</option>
                    <option value="z-to-a">Z to A</option>
                </select>
            </div>
            {/* The table with sorted content */}
            <div className="table">
                {lbBody}
            </div>
        </div>
    );
}

export default Leaderboard;

function Leaderboard() {
  // Initialize the points as the data that we passed in
  const [state, setState] = useState({
    points: points,
    sortBy: "first-to-last"
  });

  // Changes the sort method used by the leaderboard
  const changeSortBy = (event) => {
    var newSort = event.target.value;

    // Sorts the data differently depending on the select value
    switch (newSort) {
      case "first-to-last":
        sortDescending("points", "first-to-last");
        break;
      case "z-to-a":
        sortDescending("tree_name", "z-to-a");
        break;
      default:
        sortDescending("points", "first-to-last");
    }

    // Re-renders the component with new state
    setState(prev => ({
      ...prev,
      sortBy: newSort // overrider just sortByField
    }));

  }

  /* Updates the leaderboard state to be in descending point order */
  const sortDescending = (aspect, sortMethod) => {

    console.log(sortMethod); // Logs correctly

    // Sorts the data in descending points order
    let sortedPoints = [...state.points.treePoints].sort((tree1, tree2) => {
      if (tree1[aspect] > tree2[aspect]) {
        return -1;
      }
      if (tree1[aspect] < tree2[aspect]) {
        return 1;
      }
      return 0;
    });

    // Actually updates the state
    setState(prev => ({
      ...prev,
      points: {
        ...state.points,
        treePoints: sortedPoints
      },
    }));

  };

  /* Calls sortLb on component mount */
  useEffect(() => {
    sortDescending("points", "first-to-last");
  }, []);

  // Attributes used for rendering the leaderboard body
  var rank = 0;
  const sortedData = state.points;

  ...
}

export default Leaderboard;