reactJS - 使用 Axios GET 请求的 useEffect() 空响应答案

【问题标题】：reactJS - useEffect() empty response using Axios GET requestreactJS - 使用 Axios GET 请求的 useEffect() 空响应
【发布时间】：2020-07-30 09:52:20
【问题描述】：

这是我尝试使用 Axios 请求从后端获取数据的地方：

 const [models, setModels] = useState([]);

const sponsor_id = localStorage.getItem('sponsor_id');
 
  useEffect(() => {
        api.get('models', { sponsor_id }).then(response => {
            setModels(response.data);
        });
    }, []);

这是我的后端，它应该从数据库返回数据：

module.exports = {
    async index(request, response) {
        const { sponsor_id } = request.body;

        const models = await connection('model').select('*').where('sponsor_id', sponsor_id);

        return response.json(models);
    },

但是前端的响应是空的。它应该返回一些数据。我希望有人可以帮助我。

【问题讨论】：

api 里面的useEffect 是从哪里来的？您能否展示该对象以更好地了解您要做什么？
它来自：import axios from 'axios'; const api = axios.create({ baseURL: 'localhost:3333', }) 导出默认api；
所以在我的前端文件中，我从“/services/api.js”导入了“api”，其中包含上面的代码。
好的...有一件事是你不应该在请求正文上发送任何带有GET 请求的内容。我建议您将其作为 url 上的参数发送到服务器，而不是尝试在请求正文中发送。
我也尝试发送为 request.params，但它也不起作用。从 Node 服务器返回的消息是：“query: select * from 'model' where sponsor_id = ?”，但是赞助商 ID 在 localStorage 上，我已经用 console.log() 进行了测试。我认为问题出在 useEffect() 上。

标签： javascript html node.js reactjs axios

【解决方案1】：

请检查这个例子。这里我在 useEffect 中调用 axios 并在 ui 中显示响应数据。

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

function PostListPage() {
    const [posts, setPost] = useState([]);
    let signal = axios.CancelToken.source();

    useEffect(() => {
        let isSubscribed = true;
        axios.get(`https://jsonplaceholder.typicode.com/posts`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);

            }).catch(err => {
            console.log(err);
        });
        return function cleanup() {
            isSubscribed = false;
            signal.cancel('Api is being canceled');
        }
    }, []);

    return (
        <React.Fragment>
            <ul>
                {
                    posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
        </React.Fragment>
    );
}

export default PostListPage;

【讨论】：

感谢您的回答！我使用标头而不是请求的正文解决了问题。