getting error in MERN TypeError: Cannot read property 'map' of undefined

Question

我正在使用 react with node express 背景。我正在尝试从反应前端的节点 API 获取数据。节点 API 正在成功返回数据，在邮递员上进行了测试，但是当我试图在 React 中获取数据时，出现错误：

"TypeError: Cannot read property 'map' of undefined"

这是我的 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 进行更新，这就是您收到错误的原因。

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

//更改（用户=> this.setState（{ users:users}））；至 (用户 => this.setState({ //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

您的代码可以更正如下。您需要分配用户，这是一个对象数组，但您分配的用户名是一个字符串，因此地图无法正常工作。

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

不要使用索引作为键，而是使用数据中的 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;

getting error in MERN TypeError: Cannot read property 'map' of undefined

getting error in MERN TypeError: Cannot read property 'map' of undefined

reactjs

mern