从状态返回数据对象 - 无法读取未定义的属性“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 = 2class 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;

Answer 2

您可能想查看 React 的组件生命周期。

ComponentDidMount get 在挂载后执行，例如在组件渲染一次之后。在您的第一次渲染期间this.state.someData.myData未定义。访问未定义的属性会导致 TypeError。

将您的变量直接移动到您的状态：

this.state = {

      myData: [

        {name:'Item 1'},

        {name:'Item 2'},

        {name:'Item 3'}

      ], 

      myVar : 2

}

Answer 3

关于您的第一个日志语句，someData未定义，因为它是一个状态变量，因此需要作为this.state.someData. 仍然将项目直接推入状态不是一个好习惯。只是为了您的日志语句，您的状态需要像我在下面所做的那样初始化才能正确运行。

 this.state = {

    someData: {

        myData: []

    },

    myVar

 }

这也应该解决您的第二个日志语句。如果你想登录this.state.someData.myData[0]你的第一次渲染，你的状态需要像上面一样初始化，因为myDatasomeData 中的数组直到你的setStatein componentDidMount 运行才被定义。