动态反应更新数组并将其传递给子组件

Question

I have array in parent component that I need to update dynamically after reading some JSON from api. I'm using react router and I'm able to pass the array to child component and add a css class based on the array values but I can't seem to figure out how to properly update my array and change array value of panelone to off.

Parent component:

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

Child component:

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;

What is the proper way to update arr dynamically and update child components while using react router?

Answer 1

I would use state for that, then call setState() to update. Have you read this: https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class ?

You cannot set or update props directly. I would do something like this:

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

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

Answer 2

That arr is actually a instance field object, so the right way to access it and update it is through this keyword:

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

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

  //...
}

But that would leave you with the problem that React doesnt update child components when you update custom instance fields.

So the right way will be using the component's state. At the beginning App 's class define the state with arr inside:

constructor(props) {
  super(props);

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

Then instead of updating arr as an instance field you should use setState method:

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

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

  //...
}

In the render method of App use this.state.arr instead of 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>
    );
}

And it will just work the way you are currently doing with the Child component, you should check state documentation