使用 getDerivedStateFromProps 从父级反应更新子组件 state

Question

我是 React 的新手，我喜欢在父组件本身中维护 state 并将其传递给子组件上的所有子组件 But i guess am doing it wrong as the values are updated in inner level object like inside state there is a level object named state, I had tried to spread it as well but it didn't work.

父组件

  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如果还有其他更好的方法来更新子组件 state？ 另外，我想知道为每个子组件维护 state 是否是一个好习惯？ 任何帮助表示赞赏

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;
  }

In the first piece of code, you're passing an object with a key state , and your child component will have it's state set to {state: whateverCameFromAnotherComponent} as you mention in "inside state there is a level object named state". 如果您只是在收到 state 时从您的父母那里传递它，那么孩子的 state 应该与父母的非常相同。

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

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