Question

作为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 如果还有其他更好的方法来更新子组件状态？另外，我想知道维护每个子组件的状态是否是一种好习惯？感谢您的帮助

Answer 1

好吧，我建议使用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>
    );
  }
}

Answer 2

代替

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

尝试

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

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

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

并且您会看到，导航栏的状态设置为Object {name: "Kannan", countryCode: "", mobile: "", isModalOpen: false}，而没有state键。

使用getDerivedStateFromProps

2 个答案: