javascript - 对数据进行排序并在 UI 上渲染无法使用 React hooks

Question

我是新手，我想创建一个可以按价格(工资)排序的列表。我的 api 响应是假设 -

[
    {
        "id":1,
        "name": "Person 1",
        "salary": 300
    },
    {
        "id":2,
        "name": "Person 2",
        "salary": 100
    },
    {
        "id":3,
        "name": "Person 3",
        "salary": 200
    }
]

我正在尝试使用钩子(Hook) useState 和 useEffect 来获取数据并填充 UI

const salary = () => {

    const [salaryState, setsalaryState] = useState([]);
    const [load, setLoad] = useState(false);
    const [geterror, setError] = useState('');

    useEffect(() => {
        axios.get('https://apiCall')
        .then(response => {
            setsalaryState(response.data);
            setLoad(true);
        })
        .catch(error => {
            setError(error.message);
            console.log('error', geterror);
        })
    },[]);

    const handleSalrySort = () => {
        var sortAsc = salaryState.sort((a,b) => {
            return parseFloat(a.salary) - parseFloat(b.salary)
        });
        setsalaryState(sortAsc);
        console.log('sortAsc', sortAsc);
    }

    if(load){
        return (
            <div className="container-fluid pt-3">
                <div onClick={handleSalrySort}>Salary - Low to High</div>
                {
                    salaryState.map((sal,index) => {
                        return(
                            <div>
                                Person : {sal.name}
                                Salary: {sal.salary}
                            </div>      
                        )
                    })
                }
            </div>
        )
    }else{
        return(
            <div></div>
        )
    }
}

使用handleSalrySort函数后，我可以更新状态salaryState，但它没有反射(reflect)在UI上。你能帮我吗？

Answer 1

数组是引用类型。因此，您需要使用map、slice等来获取新的数据副本。否则，React不会检测到数据已更改，因为它指向相同的内存引用。

我使用了 slice() 方法。要按 DESC 顺序排序，应返回 b-a

 const handleSalrySort = () => {
    var sortAsc = salaryState.slice().sort((a, b) => {
      return parseFloat(b.salary) - parseFloat(a.salary);
    });
    setsalaryState(sortAsc);
    console.log("sortAsc", sortAsc);
  };