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

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

当我在组件的render方法上记录数组的内容时，一切看起来都很好。但是，如果我试图通过索引打印特定元素，控制台上将打印“undefined”。因此，“贴图”功能不会渲染所有所需的按钮

我在填充数组的过程中找到了不同的文档，但到目前为止，没有一篇文章表明我做了根本错误的事情。至少我看不到

State存储一个空数组，该数组以componentWillMount方法开始，并在该方法中调用一个API，该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>
    )
}

---

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

您当前的实现是在获得数据之前设置状态，然后在api调用返回后更改状态。React不能告诉你什么时候会变异，因此不知道如何重新启动。只有当你调用setState（或者当它收到新道具）时，它才知道重新播放

相反，等到您有了数据，然后才使用填充的数组调用setState

getAPIavaiableResources(api_resource) {
  fetch(api_resource)
    .then(response => response.json())
    .then(data => {
      let buttonsArray = []
      for (let i in data) {
        buttonsArray.push({id: i, name: i, url: data[i]})
      }
      this.setState({resources: buttonsArray})
    }).catch(error => console.log(error))
}

componentDidMount() {
    this.getAPIavaiableResources(ROOT_RESOURCE)
}

---

上面的示例还更新了使用componentDidMount而不是componentWillMount的代码。componentWillMount已被弃用，并且无论如何都不适用于这种情况。

目前您正在设置状态，而无需等待承诺得到解决。为此，将

this.setState（{resources:buttonsArray}）

移动到

for

循环之后

此外，您可以有条件地呈现组件，直到通过执行以下操作从远程资源获得所需的内容：

render（）{
const{resources}=this.state；
返回资源长度
? (
你的内容。。。
)
：null//或某个加载程序
}

resources[0]。map将在return语句中为您修复，而不是使用resources.map在您的fetch调用中显示api响应。然后（data=>{}）在控制台中。log（）输出数据是什么。这是API返回的对象，仅供进一步参考：{人：，行星：，电影：，物种：，车辆：，星际：}proto:object在Promise返回成功之前改变状态确实是主要问题。正如Mehmet和Nicholas所建议的那样，我还修改了我的代码，以包含所有组件的didmount和一个条件呈现逻辑。我希望我能将这两个答案都标记为我问题的解决方案，因为两者确实都能解决问题。

getAPIavaiableResources(api_resource) {
  fetch(api_resource)
    .then(response => response.json())
    .then(data => {
      let buttonsArray = []
      for (let i in data) {
        buttonsArray.push({id: i, name: i, url: data[i]})
      }
      this.setState({resources: buttonsArray})
    }).catch(error => console.log(error))
}

componentDidMount() {
    this.getAPIavaiableResources(ROOT_RESOURCE)
}