时间戳

首页 > 解决方案 > 即使我的状态（用户）的 console.log 显示 3 条记录，react 语句中的react map 函数也只显示最后一条记录。有任何想法吗？

reactjs - 即使我的状态（用户）的 console.log 显示 3 条记录，react 语句中的react map 函数也只显示最后一条记录。有任何想法吗？

问题描述

概述

我能够使用 express.js 设置我的后端，并且作为测试，我对三个用户进行了硬编码。在 Login.js 中，我执行了一个 get 请求以从后端检索数据并将其存储到 React 的 useState 方法中。我正在尝试使用 map 函数在返回函数中显示所有三个记录，但是，在客户端显示的唯一记录是“Jane”。我运行了我的状态的 console.log，它显示了状态中的所有三个记录。

**Console.log**

[{id: 1, name: "Sharif"}]

[{id: 2, name: "Mike"}] 

[{id: 3, name: "Jane"}]

登录.JS

import { useState, useEffect } from 'react';
import axios from 'axios';

function Login(req, res) {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        axios.get('/api/users')
            .then(function (response) {
                response.data.map(user => setUsers([user]));
            });
    }, []);

    console.log(users)
    return (
        <ul>
            {users.map(user => <li key={user.id}>{user.name}</li>
            )}
        </ul>
    );
}

export default Login;

服务器.JS

const express = require('express')
const app = express()
const port = 5000
app.get('/api/users', (req, res) => {

    const users = [
        {id: 1, name: "Matt"},
        {id: 2, name: "Mike"},
        {id: 3, name: "Jane"},
    ]
  res.json(users)
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

标签： reactjs

解决方案

您setUsers使用单个值多次调用状态设置器，这会导致 3 次渲染。相反，您应该将状态设置为调用的结果（稍后您可以正确映射）：

useEffect(() => {
    axios.get('/api/users')
        .then(function (response) {
            setUsers(response.data);
        });
}, []);

推荐阅读