javascript - 从状态返回数据对象 - 无法读取未定义的属性 '0'

Question

我会先说这只是我使用 React 的第二天，而且我也不是编码方面的专家。我将不胜感激对此进行解释的任何答案。但是，我们非常重视任何和所有回复。

我试图理解状态和 render() 之间的关系。我已经定义了一个名为 myDataObj 的数据对象。 App 组件在构造函数中获取一些变量。我创建了一个名为 someData 的变量，它接受一个数据对象和一个整数 myVar。第一次执行渲染函数。我的每个 console.logs 都记录到控制台。然后在渲染之后执行componentDidMount 函数，然后由于setState 方法再次运行渲染。

我的问题是为什么我不能得到我注释掉的两行来从状态中提取值？我可以通过直接引用它们来直接访问这些变量(在范围内):myDataObj.myData[0]。我可以通过 this.state.myVar 中所示的状态访问 myVar 变量。

当尝试通过 someData.myData.push({name:'Item 4'}); 将新项目推送到 myDataObj 时，我得到一个 'someData' 未定义。

当尝试通过 {console.log(this.state.someData.myData[0])} 记录变量的第一个元素时，我得到一个未定义的“无法读取属性‘0’” .

希望我能够正确阐明问题。代码如下。

谢谢

import React, {Component} from 'react';
import './App.css';

let myDataObj = {
  myData: [
    {name:'Item 1'},
    {name:'Item 2'},
    {name:'Item 3'}
    ]
};

let myVar = 2


class App extends Component {
  constructor() {
    super();
    this.state = {someData: {}, myVar}
  }
  componentDidMount() {
      myVar = myVar + 1;
      myDataObj.myData.push({name:'Item 4'});
      // someData.myData.push({name:'Item 4'});    this doesn't work... 'someData' is not defined
      this.setState({someData: myDataObj, myVar});

  }
  render () {
    return(
      <div className="App">
        {console.log(myVar)}   {/* Logs a 2 then 3 */}
        {console.log(this.state.myVar)}   {/* Logs a 2 then 3 */}
        {console.log(myDataObj.myData[3])}   {/*Logs undefined then 'Item 4' */}
        {/* {console.log(this.state.someData.myData[0])} */} {/*TypeError: Cannot read property '0' of undefined */}
      </div>
    );
  }
}

export default App;

Answer 1

不确定为什么要在类外部声明变量，然后将其用作其状态。我愿意:-

import React, {Component} from 'react';
import './App.css';


class App extends Component {
  constructor() {
    super();
    this.state = {
      myData: [{name:'Item 1'},
        {name:'Item 2'},
        {name:'Item 3'}], 
      myVar : 2}
  }
  componentDidMount() {
      //myVar = myVar + 1;
     // myDataObj.myData.push({name:'Item 4'});
      // someData.myData.push({name:'Item 4'});    this doesn't work... 'someData' is not defined
      this.setState({myData: [...this.state.myData, {"name" : 4}], 

    myVar : this.state.myVar + 1});

  }
  render () {
    return(
      <div className="App">
        {console.log(this.state.myVar)} 
        {console.log(this.state.myData[3])} 
      </div>
    );
  }
}

export default App;