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;