无法将React应用程序与后端中的NodeJS连接

pn9klfpd 于 2022-12-29 发布在 Node.js

关注(0)|答案(2)|浏览(165)

我正在尝试从后端获取数据，但出现错误fetchData.map is not a function。
有人能解释一下为什么fetchData.map is not a function
这是React代码

function App() {
        const [fetchData, setFetchData] = useState([]);
        useEffect(() => {
            fetch("/api")
                .then((res) => res.json())
                .then((data) => {
                    console.log(data);
                    setFetchData(data);
                });
        }, []);
        return <>{fetchData.map(data=> <div>data</div>)}</>;
    }

这是NodeJS代码

const express = require("express");
    const app = express();
    const test = require("./test.json");
    
    PORT = 3001;
    
    app.get("/api", (req, res) => {
        res.json(test);
    });
    
    app.listen(PORT, () => console.log(`Server Started on ${PORT}`));

node.js

来源：https://stackoverflow.com/questions/73645100/not-able-to-connect-react-app-with-a-nodejs-in-backend

2条答案

按热度按时间

hsvhsicv1#

function App() {
        // Change it to null by default
        const [fetchData, setFetchData] = useState(null);
        useEffect(() => {
            fetch("/api")
                .then((res) => res.json())
                .then((data) => {
                    console.log(data);
                    // wrap data with [] to make it iterable
                    setFetchData([data]);
                });
        }, []);

        // Check if value is present before mapping 
        return <>{fetchData?.map(data=> <div>data</div>)}</>;
    }

赞(0）回复(0）举报 2022-12-29

yshpjwxd2#

因为你的响应是对象而不是数组。