React - 属性在呈现来自 Mongo 的数据时未定义

Question

好的，今天我已经完成了战斗。请帮忙。尝试编写我的第一个应用程序。我决定使用 MERN 堆栈，但在连接前端和后端时遇到问题。后端工作正常，我在 Postman 中接收数据。下面的代码和解释，请记住这是我用来检查问题解决方案的游乐场代码。最高级别的 KISS 提取一期。走吧，反应代码：

import React from 'react';


class App extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      arr:[] 
    }
  }
    componentDidMount() {
      fetch('http://localhost:4001/animals')
        .then(response => response.json())
        .then(data => {
          var outputArr = Object.keys(data).map(key => {return data[key]})
          return outputArr
        })
        .then(data => {
          console.log('seting state: ')
          console.log(data)// first object is 'success' boolean, second is array of documents from mongo
          this.setState({ arr:data[1] })
        });     
    }

  render(){
    console.log('array in this.state: ')
    console.log(this.state.arr)
    //console.log(this.state.arr[1].name) - this is crashing code - TypeError

    return (
      <div className="App">
        <p>rendering App</p>
        <hr></hr>  
        <p>{/*this.state.arr[1].name*/}</p>
      </div>
    ); 
  }
}

export default App;

我在控制台看到，数据没问题：

array in this.state:
[
  {
    "_id": "5eb6d1097726ef7946027fd6",
    "name": "Matylda",
    "type": "kot",
    "birth_date": "01.01.2010",
    "foto_path": "",
    "status": "active"
  },
  {
    "_id": "5eb6d1097726ef7946027fd7",
    "name": "Fuks",
    "type": "kot",
    "birth_date": "01.01.2008",
    "foto_path": "",
    "status": "active"
  }
//and so on...

]

但是当我尝试访问特定数据（例如名称，如注释部分）时，我得到 "TypeError: Cannot read property 'name' of undefined"。尝试了很多不同的方式。如果我将测试对象数组添加为变量，一切正常。我从骨子里觉得 api 中的对象中的这个键有点问题，但我不知道出了什么问题以及如何让它工作。

Answer 1

由于 this.state.arr 是一个对象，您应该能够使用 this.state.arr.name 而不是 this.state.arr[1].name.

来访问名称字段

Answer 2

尝试 this.state.arr['0'].name... 数据可能是一个对象，您可能会将它们的属性名称作为字符串，即使它们看起来像数字。

如果有帮助请告诉我

Answer 3

要了解您的问题，您需要了解 React lifecycle hooks。

您正在 componentDidMount 挂钩中获取数据，该挂钩在 render 之后运行 ，当组件已经安装到 DOM.

所以当你的组件第一次挂载时 this.state.arr 仍然只是一个空数组，你还没有设置状态中的数据。

如果您将状态对象初始化为：

this.state = { arr: null }

...然后在您的 render 中，在执行任何其他操作之前放置一个条件，例如：

render(){ if (!this.state.arr) return <h1>Fetching Data...</h1> // The rest of your render here... }

这应该可以防止您的应用在获取数据之前第一次尝试呈现组件时崩溃。并且还提供一条有用的消息，表明该组件仍在等待来自 API 的数据（您可以将 h1 替换为微调器组件或其他加载状态组件）。

希望对您有所帮助！！

React - 属性在呈现来自 Mongo 的数据时未定义

React - property of undefined while rendering data from Mongo

javascript

undefined-behavior

reactjs

mern

React - 属性 在呈现来自 Mongo 的数据时未定义

React - property of undefined while rendering data from Mongo

javascript

undefined-behavior

reactjs

mern

React - 属性在呈现来自 Mongo 的数据时未定义