我有一个状态为数组的父组件,该数组也会随着时间的推移而添加。
这是父母。里面有很多事情,但是我将其简化为主要的状态,即componentShouldUpdate函数(对组件需要执行的其他所有工作)和show data方法也可以工作(我可以确认{ {1}}确实更新正确。)
gaitStats
GaitStat,孩子:
class GaitMeasure extends Component {
constructor(props) {
super(props);
this.state = {
grabData: null;
gaitStats: []
};
}
shouldComponentUpdate(nextProps) {
if (this.props.data !== null) {
if (this.props.data !== nextProps.data) {
this.showData();
}
return false;
}
if (this.props.canvas.x !== null) {
return true;
}
if (this.state.grabData) {
return true;
}
return false;
}
showData() {
....
const avgGait = [...this.state.gaitStats];
avgGait.push(Math.abs(rightX - leftX));
this.setState({
timeline: this.state.timeline + 3,
gaitStats: avgGait
});
// render
据我所知,GaitStat从未在初始渲染后重新渲染class GaitStat extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
Hi
<p>{this.props.gaitStats}</p>
</div>
);
}
}
作为道具。无论父对象重新渲染或更新其状态多少次,道具都将保持为空数组。
答案 0 :(得分:1)
您的shouldComponentUpdate方法可防止类在状态更改时进行更新。 您应该将您的shouldComponentUpdate方法更新为以下内容
shouldComponentUpdate(nextProps, nextState) {
if(nextState !== this.state){
return true;
}
if (this.props.data !== null) {
if (this.props.data !== nextProps.data) {
this.showData();
}
return false;
}
if (this.props.canvas.x !== null) {
return true;
}
if (this.state.grabData) {
return true;
}
return false;
}
您可以找到有关shouldComponentUpdate here
的更多信息。答案 1 :(得分:0)
您可以在子组件中尝试使用
shouldComponentUpdate(nextProps, nextState) {
if(nextProps.gaitStats != this.props.gaitStatus) {
this.forceUpdate();
}
}
答案 2 :(得分:0)
尝试:
shouldComponentUpdate(nextProps) {
if ((this.props.data === null && this.props.data !== nextProps.data) || this.props.canvas.x !== null || this.state.grabData) {
return true;
}
this.showData();
return false;
}
这包括您所有要满足的条件,如果并满足条件,则运行showData并返回false,例如不更新