1

我是 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} 以及渲染 console.log 中的 {state: props.params} 我得到

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

我期待的是

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

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

4

2 回答 2

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>
    );
  }
}
于 2019-09-23T19:37:07.690 回答
1

代替

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

尝试

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

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

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

编辑 heuristic-shtern-7ukg9

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

于 2019-09-23T19:38:34.453 回答