reactjs - 使用钩子更新返回的 json

Question

我最初显示基于“item.crime1”的 JSON，但我想根据我的 onChangeCrime 函数更新“crime1”。这是一种工作，但它似乎被延迟了。我是钩子的新手，所以我怀疑可能是这样。

api.js

    axios.get(apiCall)
            .then(res => {
                const x = res.data.results;
                setState((prevState) => ({ ...prevState, totalData: x }))


                x.sort(function (a, b) {
                    return a.year - b.year;
                });
                const data = {
                    labels: x.map(item => item.year),
                    datasets: [{
                        data: x.map(item => item.crime1)
                    }],
                }
                setState((prevState) => ({ ...prevState, isLoading: false, dataSort: data }));
            })
            .catch(error => {
                console.log("error...", error)
            })

       const onChangeCrime = (e) => {
        let val = e.target.value;
        setState((prevState) => ({ ...prevState, sortByCrime: val }));

        let x = totalData;
        x.sort(function (a, b) {
            return a.year - b.year;
        });
        const data = {
            labels: x.map(item => item.year),
            datasets: [{
                data: x.map(item => item[sortByCrime])
            }],
        }
        setState((prevState) => ({ ...prevState, isLoading: false, dataSort: data }));
    }

渲染.js

<div>
   <select name="sortByCrime" value={sortByCrime} onChange={(e) => onChangeCrime(e)}>
      <option value="crime1">All Crime</option>
      <option value="murder">Murder</option>
   </select>
   <Line data={dataSort} />
</div>

标签： reactjsreact-hooks