React如何访问编辑Javascript列表？

Question

我正在创建2部分代码，我试图在React的App.js文件中更改函数中的代码但是我的代码之一不起作用。

---

在App.js文件中：

我正确的代码=>

 state = {
    persons: [
      { name: 'Max', age: 28 },
    ],
    otherState: 'some other value',
    showPersons: false
  }

  togglePersonsHandler = () => {
    const doesShow = this.state.showPersons;
    this.setState({
      showPersons: !doesShow
    });
  }

顶级代码正在运行，但我的问题在于底部代码。为什么nTest Change function没有访问kkk列表？

kkk = {
  State: false,
  show: true
}
nTestChange = () => {
  const doesShow = this.kkk.show;
  this.setState({
    show: !doesShow
  });

总的来说，我需要更改kkk列表。

谢谢

Answer 1

setState被称为setState，因为它只做一件事：设置组件的状态。 React不允许任何其他变量而不是组件内的状态，因此尝试在组件内初始化kkk会抛出错误，就像你提到的那样。

在你的情况下，没有理由不使用状态。 State习惯于跟踪组件内的变量，这正是您想要做的。如果你真的不想使用state，还有另一个选择：使用this。您可以在App.js的构造函数中初始化kkk，如下所示：

constructor(props){
  super(props);
  this.kkk = {
    state: false,
    show: true
  }
}

nTestChange = () => {
  this.kkk.show = !this.kkk.show;
}

如果您不希望在kkk更改时重新呈现该组件，则应该只使用此项。在你的情况下，我会坚持使用state的工作示例。

有关州的更多信息，请参阅官方的React文档： https://reactjs.org/docs/state-and-lifecycle.html

官方入门教程还将为您提供React和状态管理的良好介绍： https://reactjs.org/tutorial/tutorial.html https://reactjs.org/tutorial/tutorial.html#an-interactive-component（关于国家管理的部分）

Answer 2

setState()功能只改变this.state对象。顺便说一句，另一种形式setState()功能是：

togglePersonsHandler = () => {
  this.setState((prevState, props) => {
    showPersons: !prevState.showPersons
  });
}

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous