Javascript 反应：Can'；t使用索引访问组件状态下的阵列数据

作为一个实践项目，我已经开始在React中构建一个小型Pokedex应用程序

import React, { Component} from 'react';
import './App.css';
import Card from './components/card/Card.component';

class App extends Component{
    constructor(){
        super();
        this.state = {}
    }


    componentDidMount(){
        let pokeDataArr = []

        const getPokemonData = async() => {
            const dataResponse = await fetch(
                'https://pokeapi.co/api/v2/pokemon?limit=10'
            );
            const dataArr = await dataResponse.json();

            const dataArr2 = await dataArr.results.forEach(i => {
                fetch(i.url)
                .then(dataResponse => dataResponse.json())
                .then(json => pokeDataArr.push(json))
            }) 

            this.setState({ pokeDataArr }, () => console.log(this.state))
        }

        getPokemonData();
    }

    render(){
        return(
            <div>Pokedex!</div>
        )
    }
}

这是控制台中的结果：

但是，如果我尝试使用以下命令从数组中的索引注销数据：

this.setState({ pokeDataArr }, () => console.log(this.state.pokeDataArr[0]))

我在控制台中得到“未定义”：

据我所知，无论您在this.setState方法的回调中运行什么函数，它都应该在setState完成后运行

我的目标是使用this.state.pokeDataArr中的数据制作卡片，显示每个口袋妖怪的信息，但在我找到从数组中提取数据的方法之前，我似乎陷入了困境，我不知道自己遗漏了什么

谢谢您的时间。

您需要使用来使用

回调

而不是普通状态更新：

this.setState(
  () => ({ pokeDataArr }), 
  () => console.log(this.state.pokeDataArr[0])
)

阅读链接示例中文档的注释：

后续调用将覆盖同一周期中以前调用的值，因此数量只增加一次。如果下一个状态取决于当前状态，建议使用updater函数表单

您需要使用来使用

回调

，而不是普通状态更新：

this.setState(
  () => ({ pokeDataArr }), 
  () => console.log(this.state.pokeDataArr[0])
)

阅读链接示例中文档的注释：

后续调用将覆盖同一周期中以前调用的值，因此数量只增加一次。如果下一个状态取决于当前状态，建议使用updater函数表单

---

我想你把你的反应状态搞砸了。 通常，人们所做的是将其react状态设置为一个对象，其中包含其他元素（数组、对象、字符串等等）。这看起来像这样：

 constructor(){
        super();
        this.state = {
           myObject: {},
           somethingElse: "",
           anArray: []
        }
 }

constructor(){
    super();
    this.state = { pokeDataArr : {} }
}

this.setState({ pokeDataArr: pokeDataArr }, () => console.log(this.state.pokeDataArr[0]))

这使您能够访问状态的某些部分，例如：

This.state.myObject

。（这将返回{}）

在示例中，您将状态定义为空对象

constructor(){
    super();
    this.state = {}
}

稍后，将此对象设置为一个对象，其中包含一个数组：

this.setState({ pokeDataArr });

这会将您的状态设置为：{[（您的数组）]} 要防止出现这种情况，请按如下方式初始化您的状态：

 constructor(){
        super();
        this.state = {
           myObject: {},
           somethingElse: "",
           anArray: []
        }
 }

constructor(){
    super();
    this.state = { pokeDataArr : {} }
}

this.setState({ pokeDataArr: pokeDataArr }, () => console.log(this.state.pokeDataArr[0]))

并按如下方式设置您的值：

 constructor(){
        super();
        this.state = {
           myObject: {},
           somethingElse: "",
           anArray: []
        }
 }

constructor(){
    super();
    this.state = { pokeDataArr : {} }
}

this.setState({ pokeDataArr: pokeDataArr }, () => console.log(this.state.pokeDataArr[0]))

---

在这里阅读更多信息：

我想你把你的反应状态搞砸了。 通常，人们所做的是将其react状态设置为一个对象，其中包含其他元素（数组、对象、字符串等等）。这看起来像这样：

 constructor(){
        super();
        this.state = {
           myObject: {},
           somethingElse: "",
           anArray: []
        }
 }

constructor(){
    super();
    this.state = { pokeDataArr : {} }
}

this.setState({ pokeDataArr: pokeDataArr }, () => console.log(this.state.pokeDataArr[0]))

这使您能够访问状态的某些部分，例如：

This.state.myObject

。（这将返回{}）

在示例中，您将状态定义为空对象

constructor(){
    super();
    this.state = {}
}

稍后，将此对象设置为一个对象，其中包含一个数组：

this.setState({ pokeDataArr });

这会将您的状态设置为：{[（您的数组）]} 要防止出现这种情况，请按如下方式初始化您的状态：

 constructor(){
        super();
        this.state = {
           myObject: {},
           somethingElse: "",
           anArray: []
        }
 }

constructor(){
    super();
    this.state = { pokeDataArr : {} }
}

this.setState({ pokeDataArr: pokeDataArr }, () => console.log(this.state.pokeDataArr[0]))

并按如下方式设置您的值：

 constructor(){
        super();
        this.state = {
           myObject: {},
           somethingElse: "",
           anArray: []
        }
 }

constructor(){
    super();
    this.state = { pokeDataArr : {} }
}

this.setState({ pokeDataArr: pokeDataArr }, () => console.log(this.state.pokeDataArr[0]))

---

阅读此处的更多信息：

如果改为console.log（this.state[0]），会发生什么？如果改为console.log（this.state[0]），会发生什么？实际上，如果您愿意，您现在可以（在正确初始化状态后）使用之前使用的相同代码，因为javascript自动理解您想要更新“pokedatarr”如果您的变量名称相同，感谢您的回复！事实上，这就是我最初编写代码的方式。即使在状态中声明变量，它仍然会给我同样的结果。真的吗？我简直不敢相信这件事。。你能再试一次，只是为了验证它确实不起作用吗？是的，再试一次，结果相同。很奇怪，我可以注销整个“this.state.pokeDataArr”数组，但当我添加带有索引的方括号时，它只记录“undefined”。不知怎么的，我觉得在幕后发生了一些我还不理解的异步事件，这就是问题的根源。如果将console.log放入render（）函数，会发生什么？因为如果这是一个异步错误，您将在这里得到正确的结果实际上，如果您愿意，您现在可以（在您的状态正确初始化之后）使用您以前使用的相同代码，因为javascript自动理解，如果您的变量具有相同的名称，您希望更新“pokeDataArr”！事实上，这就是我最初编写代码的方式。即使在状态中声明变量，它仍然会给我同样的结果。真的吗？我简直不敢相信这件事。。你能再试一次，只是为了验证它确实不起作用吗？是的，再试一次，结果相同。很奇怪，我可以注销整个“this.state.pokeDataArr”数组，但当我添加带有索引的方括号时，它只记录“undefined”。不知怎么的，我觉得在幕后发生了一些我还不理解的异步事件，这就是问题的根源。如果将console.log放入render（）函数，会发生什么？因为如果这是一个异步错误，您将在这里得到正确的结果