Реагировать на обновление массива динамически и передавать его дочернему компоненту

Question

У меня есть массив в родительском компоненте, который мне нужно динамически обновлять после чтения некоторого JSON из API. Я использую реагирующий маршрутизатор, и я могу передать массив дочернему компоненту и добавить класс css, основанный на значениях массива, но я не могу понять, как правильно обновить мой массив и изменить значение массива Panelone на выкл.

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

import React, { Component } from 'react';
import { Route, NavLink, HashRouter } from "react-router-dom";
import Child from './components/Child';

class App extends Component {

  arr = {
    panelone : 'on',
    paneltwo: 'off'
  };

  componentDidMount() {
    // Some function to get JSON... 
      this.arr.panelone = 'off'; // ???
    //...
  }

  render() {

    return (
      <div className="App">
        <TopBar />
        <HashRouter>
          <div>
            <nav>
              <ul className="header">
                <li><NavLink exact to="/">Overview</NavLink></li>
              </ul>
            </nav>
            <div className="main-container">
              <Route 
                exact path="/" 
                render={(props) => <Child arr = {this.arr} />} 
              />
            </div>
          </div>
        </HashRouter>
      </div>
    );
  }
}

Дочерний компонент:

import React, { Component } from 'react';
import { Link } from "react-router-dom";

class Child extends Component {

  render() {

    return (
      <div>
      //This is working OK and css class "on" is added from panelone val
                <div className={'item ' + this.props.arr.panelone}>
                  <p>Some Title</p>
                </div>
            </div>
    );
  }
}

export default Child;

Как правильно динамически обновлять arr и обновлять дочерние компоненты при использовании реагирующего маршрутизатора?

Answer 1

То, что arr на самом деле является объектом поля экземпляра, поэтому правильный способ получить к нему доступ и обновить его с помощью ключевого слова this:

componentDidMount() {
  // Some function to get JSON... 

  this.arr = {panelone: 'off', paneltwo: 'on'}

  //...
}

Но это оставило бы вас с проблемой, что React не обновляет дочерние компоненты при обновлении пользовательских полей экземпляра.

Таким образом, правильным будет использование состояния компонента. В начале класса App определите состояние с arr внутри:

constructor(props) {
  super(props);

  this.state = {
    arr: {
      panelone: 'off', paneltwo: 'on'
    }
  };
}

Тогда вместо обновления arr в качестве поля экземпляра следует использовать setState метод:

componentDidMount() {
  // Some function to get JSON... 

  this.setState({
    arr: {
      panelone: 'off', 
      paneltwo: 'on'
    }
  });

  //...
}

В методе рендеринга App используйте this.state.arr вместо this.arr:

render() {
    return (
      <div className="App">
        <TopBar />
        <HashRouter>
          <div>
            <nav>
              <ul className="header">
                <li><NavLink exact to="/">Overview</NavLink></li>
              </ul>
            </nav>
            <div className="main-container">
              <Route 
                exact path="/" 
                render={(props) => <Child arr = {this.state.arr} />} 
              />
            </div>
          </div>
        </HashRouter>
      </div>
    );
}

И он будет работать так же, как вы в настоящее время работаете с компонентом Child, вы должны проверить документацию о состоянии

Answer 2

Я бы использовал для этого состояние, затем позвонил бы setState() для обновления.Вы читали это: https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class?

Вы не можете устанавливать или обновлять реквизиты напрямую.Я бы сделал что-то вроде этого:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arr = {
        panelone : 'on',
        paneltwo: 'off'
      }
    };
  }

  componentDidMount() {
    this.setState({
      arr: {
        ...this.state.arr,
        panelone: 'off'
      }
    });
  }