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

Question

父组件在收到新的 props 时会重新渲染，但其子组件不会重新渲染。子组件仅第一次渲染，从不重新渲染，也不从 redux store 接收 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;
};

我的子组件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);

不知道是Parent组件有问题还是子组件有问题。 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 });
    }
  };

Answer 2

首先，将值从 props 复制到 state 绝对没有意义，这是什么意思？完全没有意义，把它放在道具里

关于您的问题 - 很可能此条件不匹配，这就是子组件不触发的原因

!isEmpty(seaFCLJSON) && seaFCLJSON.rates && seaFCLJSON.rates.fcl

在调试器中检查它

Answer 3

据我所知，您的问题是您将以下内容传递给您的子组件：

<FCLContainer fclJSON={seaFCLJSON} />

但你假设你收到了一个名为“seaFCLJSON”的道具：

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

};

您应该将代码更改为：

<FCLContainer seaFCLJSON={seaFCLJSON} />

除此之外，正如@Paul McLoughlin 已经提到的，您应该直接使用该道具，而不是将其添加到您的状态中。

Answer 4

我发现了我在操作中直接改变对象的问题。我只知道state 不应该在class 或reducer 内部直接变异。我更改了直接更改对象的操作，然后通过 dispatch 将其保存在 redux 存储中，然后我在 CWRP 中收到了更新的道具。这真的花了我很多次才弄明白。这种问题至少对我来说很难找到。我想我是从https://github.com/uberVU/react-guide/issues/17得到这个的

我学到的一个教训：永远不要直接改变对象

我改变了这个

//FCL sort by faster
export const sortByFasterFCLJSON = () => async (dispatch, getState) => {
  let seaFCLJSON = getState().route.seaFCLJSON;
  if (!seaFCLJSON.rates) return;
  seaFCLJSON.rates.fcl = _.orderBy(
    seaFCLJSON.rates.fcl,
    ["transit_time"],
    ["asc"]
  );

  seaFCLJSON.rates.sort = "Faster"; //this is the main culprit

  dispatch({ type: SET_SEA_FCL_JSON, payload: seaFCLJSON });
};

到此

//FCL sort by faster
export const sortByFasterFCLJSON = () => async (dispatch, getState) => {
  let seaFCLJSON = getState().route.seaFCLJSON;
  if (!seaFCLJSON.rates) return;
  seaFCLJSON.rates.fcl = _.orderBy(
    seaFCLJSON.rates.fcl,
    ["transit_time"],
    ["asc"]
  );

  // seaFCLJSON.rates.sort = "Faster"; //this was the main culprit, got lost

  seaFCLJSON = {
    ...seaFCLJSON,
    rates: { ...seaFCLJSON.rates, sort: "Faster" }
  };

  dispatch({ type: SET_SEA_FCL_JSON, payload: seaFCLJSON });
};

the power of not mutating data

旁注：Redux Troubleshooting