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

Question

这是我尝试使用 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); },

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

Answer 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;