MERN App - React state in Render - TypeError: Cannot read property 'username' of undefined

Question

所以，我已经为论坛构建了组件 Post。它应该显示相应的 post 并根据其 id 填充数据。该文件通过 axios 向 mongodb 发出获取请求，加载所有 post 并根据正确的 id（我从 url 获得）过滤它们。然后，在componentWillMount中，我

console.log(this.state.idUrl[0].username)

this.state.idUrl 基本上是一个数组。由于它始终只有一个 object（其中包含相应 post 的内容，以及用户名、内容、header 等），我觉得使用 0 索引很舒服。一切正常，它向我显示了右侧 post 的用户名。现在，我想在渲染中访问 this.state.idUrl[0]。但它只说“无法读取未定义的属性 ‘用户名’”。有人知道这是为什么吗？

import React, { Component } from 'react';
import axios from 'axios'


class Post extends Component {
    constructor(props)  {
        super(props)
        this.state={
            idUrl: "",
            
           
        }
 
    }
    componentWillMount() {
        let url = window.location.pathname
        var lastPartUrl = url.substr(url.lastIndexOf('/') + 1);
        //console.log(lastPartUrl);
        axios.get('http://localhost:5000/posts/all')
        .then(response => {
          

          let rightPost = response.data.filter(post => post._id === lastPartUrl)
         
          this.setState({idUrl: rightPost})    
          //why does this work but ...
          console.log(this.state.idUrl[0].username)    
        })
        .catch((error) => {
          console.log(error)
        })

    }

    render() {
        return (
            <div> 
                {/*... but this won't? */}

               <h1>{this.state.idUrl[0].username}</h1>
            </div>
        )
    }
}


export default Post

Answer 1

我会说axios中的请求需要很长时间，因此这个{this.state.idUrl[0].username}没有定义。

试试这样的东西：

{this.state.idUrl && this.state.idUrl[0] && this.state.idUrl[0].username}

此外，由于您知道 isUrl 是一个数组，我建议将其定义为数组：

this.state={
    idUrl: [],
}

所以你可以这样做：{this.state.idUrl.length > 0 && this.state.idUrl[0].username}

MERN App - React state in Render - TypeError: Cannot read property 'username' of undefined

MERN App - React state in Render - TypeError: Cannot read property 'username' of undefined

javascript

reactjs

mern