API работает, но я не могу получить ax ios для записи данных, возвращаемых из API - PullRequest
Новая
       3

API работает, но я не могу получить ax ios для записи данных, возвращаемых из API

0 голосов
/ 25 февраля 2020

Я запускаю API с помощью Ax ios, который выглядит так, когда я подключаюсь к нему через браузер (https://localhost: 41216 / api / article ): 

[{"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 в своем браузере, я получаю возвращенные данные, как в примере, который я привел выше.

1 Ответ

1 голос
/ 25 февраля 2020 

    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 .

...