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

Question

我先说这只是我接触 React 的第二天，我也不是编码专家。我将不胜感激对此作出解释的任何答案。然而，任何和所有的回应都非常有价值。

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

我的问题是为什么我不能得到我注释掉的两行以从状态中提取值？我能够通过直接引用他们直接访问这些变量（范围内）myDataObj.myData[0]。我可以myVar通过状态访问变量，如 中所示this.state.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 {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; myData: [{name:'Item 1'},&nbsp; &nbsp; &nbsp; &nbsp; {name:'Item 2'},&nbsp; &nbsp; &nbsp; &nbsp; {name:'Item 3'}],&nbsp;&nbsp; &nbsp; &nbsp; myVar : 2}&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; //myVar = myVar + 1;&nbsp; &nbsp; &nbsp;// myDataObj.myData.push({name:'Item 4'});&nbsp; &nbsp; &nbsp; // someData.myData.push({name:'Item 4'});&nbsp; &nbsp; this doesn't work... 'someData' is not defined&nbsp; &nbsp; &nbsp; this.setState({myData: [...this.state.myData, {"name" : 4}],&nbsp;&nbsp; &nbsp; myVar : this.state.myVar + 1});&nbsp; }&nbsp; render () {&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; {console.log(this.state.myVar)}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {console.log(this.state.myData[3])}&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default App;

Answer 2

您可能想查看 React 的组件生命周期。ComponentDidMount get 在挂载后执行，例如在组件渲染一次之后。在您的第一次渲染期间this.state.someData.myData未定义。访问未定义的属性会导致 TypeError。将您的变量直接移动到您的状态：this.state = {&nbsp; &nbsp; &nbsp; myData: [&nbsp; &nbsp; &nbsp; &nbsp; {name:'Item 1'},&nbsp; &nbsp; &nbsp; &nbsp; {name:'Item 2'},&nbsp; &nbsp; &nbsp; &nbsp; {name:'Item 3'}&nbsp; &nbsp; &nbsp; ],&nbsp;&nbsp; &nbsp; &nbsp; myVar : 2}

Answer 3

关于您的第一个日志语句，someData未定义，因为它是一个状态变量，因此需要作为this.state.someData. 仍然将项目直接推入状态不是一个好习惯。只是为了您的日志语句，您的状态需要像我在下面所做的那样初始化才能正确运行。&nbsp;this.state = {&nbsp; &nbsp; someData: {&nbsp; &nbsp; &nbsp; &nbsp; myData: []&nbsp; &nbsp; },&nbsp; &nbsp; myVar&nbsp;}这也应该解决您的第二个日志语句。如果你想登录this.state.someData.myData[0]你的第一次渲染，你的状态需要像上面一样初始化，因为myDatasomeData 中的数组直到你的setStatein componentDidMount 运行才被定义。