setState更新挂钩后未重新呈现功能组件

Question

我有以下组件，我认为这将是非常简单的。数据被传递到子组件中，该子组件使用Charts.js呈现条形图。在第一个渲染上，一切正常。但是，当我运行“排序数据”功能时，数据会更新，但子组件不会重新呈现。基于类的组件也出现了类似的问题，但找不到我的案例的答案。

import React, { useState } from 'react';

const Landing = () => {

    const [data, setData] = useState([
        { year: 2017, value: 50 },
        { year: 2016, value: 60 },
        { year: 2013, value: 50 },
        { year: 2014, value: 80 },
        { year: 2019, value: 70 }

    ]);


    const sortData = () => {
        const newArray = data.sort(function (a, b) { return a.year - b.year })
        setData(newArray);
    }

    return (
        <div>
            <BarChart data={data} />
            <button onClick={sortData} > sort data </button>
        </div>

    )
}

export default Landing

Answer 1

之所以不重新渲染组件，是因为当您使用data.sort并根据React文档，您应该直接改变状态时，应该

切勿直接更改state，因为之后调用setState（）可能会替换您所做的更改。将state视为不可变。

• reactjs.org/docs/react-component.html#state

由于Array.sort方法是可变的，因此您应该创建data的副本，然后在新数组上使用Array.sort。

const Landing = () => {
  const [data, setData] = React.useState([
    { year: 2017, value: 50 },
    { year: 2016, value: 60 },
    { year: 2013, value: 50 },
    { year: 2014, value: 80 },
    { year: 2019, value: 70 }
  ]);

  const sortData = () => {
    // using `spread operator` to create
    // a copy of the `data` array
    const newArray = [...data].sort(function(a, b) {
      return a.year - b.year;
    });
    setData(newArray);
  };

  return (
    <div>
      <BarChart data={data} />
      <button onClick={sortData}> sort data </button>
    </div>
  );
};

如果数组方法使原始数组发生突变，请始终在更新状态之前复制原始数组的副本。

[这里看看哪些Array方法是可变的，哪些不是：

• doesitmutate.xyz