javascript - 子组件不会重新渲染，但父组件会重新渲染。如何让子组件重新渲染？

Question

父组件在收到新 Prop 后会重新渲染，但其子组件不会重新渲染。子组件仅第一次渲染，不会重新渲染，也不会从 redux 存储中接收 props

我从父组件中的 redux 存储中获取更新的数据，但不在子组件中获取。子组件仅在第一次渲染时从 redux store 接收数据

我的父组件 Home.js

对象seaFCLJSON看起来像这样 const seaFCLJSON ={"rates": {"sort":"faster", "someOther": "someOtherValues"}};

当 redux 存储更新时，seaFCLJSON 看起来像这样 const seaFCLJSON ={"rates": {"sort":"cheaper","someOther": "someOtherValues"}};

class Home extends Component {
state = {
    seaFCLJSON: {}
  };

componentDidMount = () => {
     this.setState({ seaFCLJSON: this.props.seaFCLJSON });
  };

 componentWillReceiveProps = nextProps => {
    if (this.state.seaFCLJSON !== nextProps.seaFCLJSON) {
      this.setState({ seaFCLJSON: nextProps.seaFCLJSON });
    }
  };

 render() {
    const { seaFCLJSON } = this.props;
 return (
       <>
    {!isEmpty(seaFCLJSON) && seaFCLJSON.rates && seaFCLJSON.rates.fcl ? (
          <FCLContainer fclJSON={seaFCLJSON} />
        ) : null} //it never rerenders upon getting updated data from redux store

    <h5>{JSON.stringify(seaFCLJSON.rates && seaFCLJSON.rates.sort)}</h5> //it rerenders everytime upon getting updated data from redux store
       </>
     );
  }
}

const mapStateToProps = state => {
  return {
    seaFCLJSON: state.route.seaFCLJSON
  };
};

export default connect(
  mapStateToProps,
  actions
)(Home);

isEmpty.js

export const isEmpty = obj => {
  return Object.entries(obj).length === 0 && obj.constructor === Object;
};

我的 child 组件FCLContainer.js

class FCLContainer extends Component {
  state = {
    seaFCLJSON: {}
  };
  componentDidMount = () => {
    this.setState({ seaFCLJSON: this.props.seaFCLJSON });
  };

  componentWillReceiveProps = nextProps => {
    console.log("outside state value: ", this.state.seaFCLJSON);
    if (this.state.seaFCLJSON !== nextProps.seaFCLJSON) {
      this.setState({ seaFCLJSON: nextProps.seaFCLJSON });
      console.log("inside state value: ", this.state.seaFCLJSON);
    }
  };


  render() {
    const { seaFCLJSON } = this.state;
    console.log("rendering .. parent props: ", this.props.fclJSON);
    console.log("rendering .. redux store props: ", this.props.seaFCLJSON);

    return (
      <>
        <div className="home-result-container">
          <div>
          <h5>This child component never rerenders :(</h5>
          </div>
        </div>
      </>
    );
  }
}

const mapStateToProps = state => {
  return {
    seaFCLJSON: state.route.seaFCLJSON
  };
};

export default connect(
  mapStateToProps,
  actions
)(FCLContainer);

不知道是父组件有问题还是子组件有问题。 componentWillReceiveProps在父组件中被调用，但在子组件中不被调用。请忽略任何缺少的分号或大括号，因为我省略了一些不必要的代码。编辑 1:我只是将 props 中的值复制到 state 只是为了调试目的。

我将感谢您的帮助。谢谢。

编辑 2:我直接在 redux 操作中更改对象。这就是 CWRP 没有被解雇的原因。这就是问题所在。有关更多信息，请查看下面我的回答。

Answer 1

componentWillReceiveProps 将在 React 17 中弃用，使用 componentDidUpdate 代替，更新发生后立即调用尝试这样的事情:

componentDidUpdate(prevProps, prevState) {
    if (this.prevProps.seaFCLJSON !== this.props.seaFCLJSON) {
      this.setState({ seaFCLJSON: this.props.seaFCLJSON });
    }
  };