Реакция обновления состояния дочернего компонента от родителя с помощью getDerivedStateFromProps - PullRequest
Новая
       27

Реакция обновления состояния дочернего компонента от родителя с помощью getDerivedStateFromProps

0 голосов
/ 23 сентября 2019

Я новичок в React, мне нравится поддерживать состояние самого родительского компонента и передавать его всем дочерним компонентам дочернего компонента. Я хочу обновить дочернее состояние из состояния родительского компонента, использующего getDerivedStateFromProps для его обновления.Но я думаю, что я делаю это неправильно, так как значения обновляются в объекте внутреннего уровня, как будто внутри состояния есть объект уровня с именем state, я тоже пытался распространить его, но это не сработало.

Родительский компонент 

  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} в рендере console.log получаю 

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

то, что я ожидаю 

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

Примечание: Нет REDUX .Я не хочу использовать REDUX Если есть какой-либо другой лучший способ обновить состояние дочернего компонента?Кроме того, я хотел бы знать, является ли поддержание состояния для каждого дочернего компонента хорошей практикой или нет?Любая помощь приветствуется

Ответы [ 2 ]

1 голос
/ 23 сентября 2019

Вместо 

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

Попробуйте 

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

В первом фрагменте кода вы передаете объект с ключом state, и ваш дочерний компонент будет иметьэто состояние установлено на {state: whateverCameFromAnotherComponent}, как вы упомянули в «внутри состояния есть объект уровня с именем state».Если вы просто передаете состояние от своего родителя по мере его получения, состояние ребенка должно быть таким же, как и у родителя.

Я попытался воссоздать ваш сценарий здесь:

Edit heuristic-shtern-7ukg9

и, как вы можете видеть, состояние Navbar установлено на Object {name: "Kannan", countryCode: "", mobile: "", isModalOpen: false}, без ключа state.

1 голос
/ 23 сентября 2019

Ну, я бы предложил использовать 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>
    );
  }
}
...