访问 JavaScript 数组返回“未定义”

Question

我正在用纯 Reactjs 构建一个简单的应用程序。我遇到问题的组件是一个组件，它应该通过映射以前通过从外部 API 获取一些数据来填充的数组来呈现多个按钮。这个数组填充在一个类方法中，结果最终被复制到另一个数组中，该数组是组件状态的一部分

当我在组件的渲染方法上 console.log 数组的内容时，一切看起来都很好。但是，如果我尝试按索引打印特定元素，控制台上会打印“未定义”。因此，地图功能不会呈现所有所需的按钮。

我设法围绕我填充数组的方式找到了不同的文档，但到目前为止，没有一篇文章表明我在做任何根本错误的事情。至少不是我能看到的。

State 存储一个空数组作为开始，并且在 componentWillMount 方法中调用 API 来获取数据并更新数组，如下所示：

this.state = {

      resources: []

}

getAPIavaiableResources(api_resource) {

    let buttonsArray = []

    fetch(api_resource)

      .then(response => response.json())

      .then(data => {

        for (let i in data) {

          buttonsArray.push({id: i, name: i, url: data[i]})

        }

      }).catch(error => console.log(error))

    this.setState({resources: buttonsArray})

}

componentWillMount() {

    this.getAPIavaiableResources(ROOT_RESOURCE)

}

render() {

    const { resources } = this.state;

    console.log(resources)

    console.log(resources[0])

    return (

      <div className="buttons-wrapper">

        {

          resources.map(resource => {

            return <Button

                      key={resource.id}

                      text={resource.name} 

                      onClick={this.handleClick} 

                    />

          })

        }

      </div>

    )

}

这是在渲染方法上打印到控制台上的内容。

[]

0: {id: "people", name: "people", url: "https://swapi.co/api/people/"}

1: {id: "planets", name: "planets", url: "https://swapi.co/api/planets/"}

2: {id: "films", name: "films", url: "https://swapi.co/api/films/"}

3: {id: "species", name: "species", url: "https://swapi.co/api/species/"}

4: {id: "vehicles", name: "vehicles", url: "https://swapi.co/api/vehicles/"}

5: {id: "starships", name: "starships", url: "https://swapi.co/api/starships/"}

length: 6

__proto__: Array(0)

谁能看到我做错了什么？我正在推送一个对象，因为我确实想要一个对象数组，尽管 Javascript 中的数组也是对象。任何帮助，将不胜感激。

Answer 1

目前，您正在设置状态，而无需等待承诺得到解决。为此，请this.setState({resources: buttonsArray})在for循环后移动。此外，您可以有条件地渲染组件，直到您通过执行以下操作从远程资源中获得所需内容：render () {&nbsp; const { resources } = this.state;&nbsp; return resources.length&nbsp; &nbsp; ? (&nbsp; &nbsp; &nbsp; <div>Your content...</div>&nbsp; &nbsp; )&nbsp; &nbsp; : null // or some loader}