时间戳

首页 > 解决方案 > API 正在工作，但我无法让 axios 写出从 API 返回的数据

reactjs - API 正在工作，但我无法让 axios 写出从 API 返回的数据

问题描述

当我通过浏览器（https://localhost:41216/api/articles）连接到 Axios 时，我正在使用如下所示的 API：

[{"id":1,"name":"Detection of solar neutron events and their theoretical approach","groupById":2,"groupBy":null},
{"id":2,"name":"Dark energy and modified scale covariant theory of gravitation","groupById":2,"groupBy":null},
{"id":3,"name":"United theory of planet formation (i): Tandem regime","groupById":2,"groupBy":null}]

我让它工作，但它是这样硬编码的：

import React from "react";

const OptionList = () => {

    return (
        <>
            <option value='Article' label='Select an article' />
            <option value='1' label='Detection of solar neutron events and their theoretical approach' />
            <option value='2' label='Dark energy and modified scale covariant theory of gravitation' />
            <option value='3' label='United theory of planet formation (i): Tandem regime' />               
        </>
    )
}

export default OptionList;

但我想使用 API，所以我开始编写代码：

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

const OptionList = () => {

    const [data, setData] = useState('');

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'https://localhost:41216/api/articles',
            );
            setData(result.data);
        };
        fetchData();
    }, []);

    return (
        <>
            {data.map(item => (
                <option value={item.id} label={item.name} />
            ))}
        </>

    );
}
export default OptionList;

但我不断收到一条错误消息

TypeError: data.map is not a function

我知道 API 正在工作，因为我在浏览器中访问了 URL，我得到了返回的数据，就像我上面放的例子一样。

标签： reactjsaxios

解决方案

这个

    const [data, setData] = useState('');

将 的默认值初始化data为空字符串。

简单地，

    const [ data, setData ] = useState([]);

通过将数据初始化为空数组以具有.map方法来解决此问题。

我也会

    function renderOptions() {
        if(data.length <= 0) {
            return <Loader />
        }
        return data.map(item => (
            <option value={item.id} label={item.name} />
        ))
    }

    return (
        <>
            {renderOptions()}
        </>

    );

这可以显示加载器屏幕，而您data无需映射和生成<option>s。

推荐阅读