访问 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 () {

  const { resources } = this.state;

  return resources.length

    ? (

      <div>Your content...</div>

    )

    : null // or some loader

}