node.js - React 不显示从 axios 返回的数组的所有值

问题描述

这是我的后端NodeJS代码：

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
const cors = require('cors');

app.get('/getEmployees', cors(), (req, res) => {
    res.send([
        '00001 | Alice',
        '00002 | Bob',
        '00003 | Charlie',
        '00004 | Dave',
        '00005 | Eve',
        '00006 | Frank',
    ]);
});

app.listen(port, () => {
    console.log(`Server is up on port ${port}`);
});

这是我的前端 React 代码：

import React, { useState, useEffect } from 'react';
import classes from './App.module.css';
import axios from 'axios';

function App() {

    const [employeesList, setEmployeesList] = useState(null);

    useEffect(() => {
        axios.get('http://127.0.0.1:3000/getEmployees').then((response) => {
            console.log(response.data); // Checking value
            let list = [];
            response.data.map((employee) => {
                list.push(<option>{employee}</option>)
                return setEmployeesList(list)
            })
        });
    }, []);

    return (
        <div className={classes.App}>
            Please select employee:
            <select>
                {employeesList}
            </select>
        </div>
    );
};

export default App;

当我运行它们时，我可以在浏览器上看到一个下拉列表，但只有一个值，即第一个员工 Alice。

如您所见，我console.log在axios函数中执行此操作，它会打印多个员工。我希望在下拉列表中看到所有员工。谁能帮我？

标签： node.jsreactjsaxiossetstateuse-effect

更改useEffect如下：

  useEffect(() => {
    axios.get('http://127.0.0.1:3000/getEmployees').then((response) => {
      response.data.map((employee, index) => {
        list.push(<option key={index.toString()}>{employee}</option>)
      })
      setEmployeesList(list);
    });
  }, []);

Codesandbox 在这里

node.js - React 不显示从 axios 返回的数组的所有值

问题描述

解决方案

推荐阅读