получение ошибки в MERN TypeError: Невозможно прочитать свойство 'map' из неопределенного - PullRequest
Новая
       14

получение ошибки в MERN TypeError: Невозможно прочитать свойство 'map' из неопределенного

0 голосов
/ 18 сентября 2018

Я использую реакцию с фоном экспресс-узла.Я пытаюсь получить данные от API узла в переднем конце реакции.API узла возвращает данные успешно, протестировано на почтальоне, но когда я пытаюсь получить данные в ответ, я получаю сообщение об ошибке:

"Ошибка типа: не удается прочитать свойство '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;

Снимок экрана вызова API узла

Screenshot of calling Node API

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

Ваш код может быть исправлен следующим образом. Вам нужно назначить пользователей, которые представляют собой массив объектов, но вы назначаете имя пользователя в виде строки, чтобы карта не работала.

И вам нужно проверить длину массива, если его длина больше нуля, а затем сопоставить пользователей.

Не используйте индекс в качестве ключа, вместо этого используйте идентификатор из ваших данных в качестве ключа

Проверьте код ниже для лучшего понимания 

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;
0 голосов
/ 18 сентября 2018

Для этого необходимо обновить состояние с помощью массива, но вы обновляете с помощью string, поэтому вы получаете ошибку.

Карта может быть применена к массиву, а не к строке.

// изменить (users => this.setState ({users: users})); to (users => this.setState ({//users:users.users innovative));

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>
);}
...