Question

问题：

我正在开发一个使用 axios 从 rest api 获取数据的 react 程序，但是当我运行代码时，它在浏览器上出现错误“无法读取未定义的属性‘地图’”。请帮我解决这个错误。

代码：

import React from 'react';

import axios from 'axios';

export default class UserList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const users = res.data;
        this.setState({ users });
      })
  }

  render() {
    return (
      <ul>
        { this.state.users.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

Answer 1

错误是由于在 users 对象中未设置 state 属性。

修复只是在 state 中设置users 属性

state = {
  users: []
}

Answer 2

您的初始状态不正确，应该是：

state = {
    users: []
}

Answer 3

在获取数据后您没有填充 people 数组。

componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const users = res.data;
        this.setState({ persons: users });
      })
  }

  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }

Answer 4

最好做空检查

<ul>
{this.state.persons && this.state.persons.map(person => <li>{person.name}</li>)}
</ul>

反应错误：无法读取未定义的属性“地图”

4 个答案: