在React中根据道具更改重新渲染子组件的最佳解决方案是什么？

Question

I have a parent component that fetches data in componentDidMount() hook. The state is setState() -d with this data. Then I pass the data to the child components as props and set their state based on these props. On the first render the props will be undefined because componentDidMount() hasn't executed yet. So, the child components get undefined props and the state is created with them. When the data fetches in componentDidMount() new props are passed to the child components, but the state is already created with undefined props and nothing changes. So, I am aware of two solutions now:

• Use componentWillRecieveProps() . But this is now deprecated.

• Use stateless child components. Pass the data to them as props from the parent component and don't set a state(use the data from props), and when the parent does a setState() in componentDidMount() , this will cause a re-render to child components with new props and everything works.

Now, what if I want to have stateful child components? I can't use the second method, and the first one is deprecated. What is the best solution to accomplish this?

Answer 1

You can read this blog post . In short a better approach would be to use fully uncontrolled component with key.

1. Add a key to the child component based on data. If the data changes, the key changes and child component will re-mount.
2. Provide data as props to the child, use this props as default state of child component.

Here is a sandbox example

Answer 2

static getDerivedStateFromProps(props, state)

is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing. This method exists for rare use cases where the state depends on changes in props over time.

  static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.someValue!==prevState.someValue){
     return { someState: nextProps.someValue};
   }
    else return null;
  }

For more details enter link description here

Answer 3

Consider using the replacement for componentDidReceiveProps , getDerivedStateFromProps , if you have state within a component which is informed by the values of the props it receives.

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops