在MERN TypeError中出错：无法读取未定义的属性“地图”

Question

我正在使用节点表示背景进行反应。 我正在尝试从React前端的Node API获取数据。 Node API已成功返回数据，并在邮递员上进行了测试，但是当我试图使数据做出反应时，却出现了错误：

  

“ TypeError：无法读取未定义的属性'map'”

这是我的API：

router.get("/get_data", function (req, res) {
    res.json({
        "users": [
            {
                id: 1,
                username: "samsepi0l"
            },
            {
                id: 2,
                username: "D0loresH4ze"
            }
        ]
    });
});

这是ReactJs代码：

import React, {Component} from "react";
import "./App.css";

class App extends Component {
    state = {users: []};

    componentDidMount() {
        fetch("/funi/get_data")
            .then(res => res.json())
            .then(users => this.setState({users: users.username}));
    }

    render() {
        return (<div className="App">
                <h1>Users</h1>
                {this.state.users.map((user, index) => <div key={index}>{user.username}</div>)}
            </div>);
    }
}

export default App;

调用Node API的屏幕截图

Answer 1

执行此操作，必须使用数组更新状态，但是要使用string更新，这就是为什么会出错。

地图可以应用于数组而不是字符串。

// change（用户=> this.setState（{users：users}））；到（users => this.setState（{//users:users.users}））;

componentDidMount() {
 fetch('/funi/get_data')
    .then(res => res.json())
    .then(users => this.setState({ users:users.users}));
 }

// return在地图内丢失。

render() {
const { users } = this.state;
return (
    <div className="App">
        <h1>Users</h1>
        {users.length > 0 && users.map((user, index) =>
          return  <div key={user.id}>{user.username}</div>
        )}
    </div>
);}

Answer 2

您的代码可以按以下方式更正。您需要分配用户（它是对象的数组），但是要分配用户名（它是一个字符串），因此map无法正常工作。

并且您需要检查数组的长度（如果它的长度大于零），然后才对用户进行映射。

不要使用索引作为键，而是使用数据中的id作为键

检查以下代码以更好地理解

import React, { Component } from 'react';
import logo from './logo.svg'; import './App.css';

class App extends Component {

state = {users: []}

componentDidMount() {
    fetch('/funi/get_data')
        .then(res => res.json())
        .then(res => this.setState({ users: res.data.users }));
}

render() {
    const { users } = this.state;
    return (
        <div className="App">
            <h1>Users</h1>
            {users.length > 0 && users.map(user =>
                return <div key={user.id}>{user.username}</div>
            )}
        </div>
    );
}
}

export default App;