父状态更改时,子组件未更新

时间:2019-06-05 14:58:39

标签: reactjs

我有一个状态为数组的父组件,该数组也会随着时间的推移而添加。

这是父母。里面有很多事情,但是我将其简化为主要的状态,即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> ); } } 作为道具。无论父对象重新渲染或更新其状态多少次,道具都将保持为空数组。

3 个答案:

答案 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,例如不更新