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

我在父组件中有一个数组，在从api读取一些JSON后需要动态更新该数组。 我使用的是react路由器，我能够将数组传递给子组件，并根据数组值添加css类，但我似乎不知道如何正确更新数组并将panelone的数组值更改为off

父组件：

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}来自'React'；
从“react router dom”导入{Route，NavLink，HashRouter}；
从“./components/Child”导入子项；
类应用程序扩展组件{
arr={
第一组：“开”，
第二组：“关”
};
componentDidMount（）{
//获取JSON的一些函数。。。
this.arr.panelone='off'；/？？？
//...
}
render（）{
返回(

概述

} 
/>
);
}
}

子组件：

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;

import React，{Component}来自'React'；
从“react router dom”导入{Link}；
类子扩展组件{
render（）{
返回(
//这工作正常，css类“on”是从panelone val添加的
一些头衔

);
}
}
导出默认子对象；

---

使用react router时，动态更新arr和更新子组件的正确方法是什么？

我将使用状态进行更新，然后调用

setState（）

进行更新。你读过这个吗

您不能直接设置或更新道具。我会这样做：

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

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

---

我会使用state，然后调用

setState（）

进行更新。你读过这个吗

您不能直接设置或更新道具。我会这样做：

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

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

---

arr

实际上是一个实例字段对象，因此访问和更新它的正确方法是通过

这个

关键字：

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

render（）{
返回(

概述

} 
/>
);
}

---

它将以您当前处理

子组件的方式工作，您应该检查是否
arr
实际上是一个实例字段对象，因此访问和更新它的正确方法是通过
此
关键字：

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

render（）{
返回(

概述

} 
/>
);
}

它的工作方式与您当前处理
子组件的方式相同，您应该检查事实上，我读过它，但我似乎无法使它与react Router一起工作如果您使用状态而不是道具，它将在调用setState时重新渲染自身和所有子组件。尝试将这一行：
render={（props）=>}
也更改为：
render={（）=>}
。明白了，谢谢！伟大的很高兴听到它实际上，我读过它，但我似乎无法使它与react Router一起工作如果你使用状态而不是道具，当你调用setState时，它会重新播放自己和所有的孩子。尝试将这一行：
render={（props）=>}
也更改为：
render={（）=>}
。明白了，谢谢！伟大的很高兴听到这个，汉克斯。若我在主组件上使用构造函数，我会得到：TypeError:无法读取未定义的属性“panelone”。来自子组件行：this.props.arr.paneloneCheck@鸽子头回复他的答案明白了。谢谢你。若我在主组件上使用构造函数，我会得到：TypeError:无法读取未定义的属性“panelone”。来自子组件行：this.props.arr.paneloneCheck@鸽子头回复他的答案明白了。非常感谢