我有以下组件,我认为它非常简单。数据被传递到使用 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
最佳答案
你的组件没有重新渲染的原因是因为你在使用 data.sort
时直接改变了你的状态,根据 React
文档,你应该
Never mutate
state
directly, as calling setState() afterwards may replace the mutation you made. Treatstate
as if it were immutable.
由于 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
方法是可变的,哪些不是:
https://stackoverflow.com/questions/60587291/