使用 getDerivedStateFromProps 从父级响应更新子组件状态答案

【问题标题】：React update child component state from parent using getDerivedStateFromProps使用 getDerivedStateFromProps 从父级响应更新子组件状态
【发布时间】：2020-01-23 21:50:01
【问题描述】：

我是 React 的新手，我喜欢在父组件本身中维护状态并将其传递给子组件上的所有子组件我想从父组件状态更新子状态，我正在使用 getDerivedStateFromProps 来更新它。但我想我做错了，因为值在内部级别对象中更新，比如内部状态有一个名为状态的级别对象，我也尝试过传播它，但它没有用。

父组件

  import React from 'react';
  import './App.css';
  import Navbar from './components/Navbar';

  class App extends React.Component {
    state = {
      name: 'Kannan',
      countryCode: '',
      mobile: '',
      isModalOpen: false,
    };

    render() {
      return (
        <div className="App">
          <Navbar params={this.state}></Navbar>
        </div>
      );
    }
  }

  export default App;

子组件

  class NavbarComponent extends React.Component {
  constructor(props) {
    super(props);

    console.log(props.params);

    this.state = {};
  }

  static getDerivedStateFromProps(props, state) {
    console.log(state);
    return { state: props.params };
    // return  {state: { ...props.params }} ;
  }

  render() {
    console.log(this.state);
    return (
      <div>
           "Something"
      </div>
    );
  }
}

我已尝试使用 { state: ...props.params} 以及渲染控制台中的 {state: props.params} 正在获取

   {state: {…}}
     state: {name: "Kannan", countryCode: "", mobile: "", isModalOpen: false}
    __proto__: Object

期待的是

 state: {name: "Kannan",countryCode:"",mobile:"",isModalOpen:false}

注意： 没有 REDUX。我不想使用 REDUX 如果还有其他更好的方法来更新子组件状态？另外，我想知道为每个子组件维护状态是否是一种好习惯？任何帮助表示赞赏

【问题讨论】：

为什么孩子需要状态？不能只用道具吗？
是的，我们可以，但我想尝试使用子状态，这是错误的方法吗？
试图将道具复制到状态中几乎总是错误的方法。让父组件成为唯一的事实来源。它将在其状态中具有值，然后所有其他组件将通过 props 获取值。
@NicholasTower 我将在作为 APP 组件的子组件的 Navbar 组件下有多个子组件，我是否仍然只有 APP 组件中的状态？
您可能会发现这篇文章很有用：reactjs.org/docs/lifting-state-up.html

标签： javascript reactjs react-lifecycle react-lifecycle-hooks

【解决方案1】：

代替

static getDerivedStateFromProps(props, state) {
    return { state: props.params };
}

试试

  static getDerivedStateFromProps(props, state) {
    return props.params;
  }

在第一段代码中，您传递了一个带有键 state 的对象，并且您的子组件将其状态设置为 {state: whateverCameFromAnotherComponent}，正如您在“在状态内部有一个名为 state 的级别对象”。如果您只是在收到状态时从父级传递状态，则子级的状态应该与父级的状态完全相同。

我试图在这里重新创建你的场景：

如您所见，导航栏的状态设置为Object {name: "Kannan", countryCode: "", mobile: "", isModalOpen: false}，其中没有state 键。

【讨论】：

【解决方案2】：

我建议使用redux 而不是将整个state 从父级传递给子级。但如果你真的想这样做，那么它应该如下所示：

import React from 'react';
import './App.css';
import Navbar from './components/Navbar';

**Parent Component**

class App extends React.Component {
  state = {
    name: 'Kannan',
    countryCode: '',
    mobile: '',
    isModalOpen: false,
  };

  render() {
    return (
    <div className="App">
        <Navbar params={this.state}></Navbar>
    </div>
    );
  }
}

export default App;

**Child Component**

class NavbarComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    return { ...props.params };
  }

  constructor(props) {
    super(props);
    this.state = props.params;
  }

  render() {
    return (
      <div>
        <span>"Something"</span>
      </div>
    );
  }
}

【讨论】：