我有以下内容,我认为这将是非常简单的。数据被传递到子组件中,该子组件使用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
答案 0 :(得分:1)
不重新渲染组件的原因是,当您使用data.sort
并根据React
文档时,您直接改变状态是应该的
请勿直接更改
state
,因为此后调用setState()可能会替换您所做的更改。将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
方法是可变的,哪些不是: