Реагировать на использование крючка - PullRequest
Новая
       13

Реагировать на использование крючка

0 голосов
/ 02 апреля 2020

У меня следующая ошибка при использовании хуков для извлечения данных. У меня есть два функциональных компонента 

function TopTen() {
    const [topTen, setTopten] = useState([]);  
    const [loading, setLoading] = useState(true); 
    const [error, setError] = useState(false); 

    useEffect(() => {         
        console.log("useEffect TopTen has been called!");   
        const fetchdata = async () => {
        const response = await api.topTen();  // this calls axios(url)
        setLoading(false);
        setTopten(response.data);    
        setError(response.error);    
    };

    fetchdata ();     
}, []);

  return ( 
        {topTen.length > 0 &&
        <Table 
          tableData={topTen.map((item, idx) => {
            return ([
              item.name
            ]);
          })}
        /> 
        }
    )

}

function Declaraciones() {

    // ... here I'm using other effects also for fetching data 
    const [data, setData] = useState([]);

    useEffect(() => {            
        const fetchData = async () => {
        const response = await api.fetch();
    //...
        };

        fetchData ();     
    }, []);

    return (

        <div>
            <p>{data}</p>
            <TopTen />
        </div>
    )

}

Почему-то иногда компонент TopTen работает нормально, а иногда нет. Это как случайный. Я вижу, что вызовы API возвращают ложные данные, такие как «кэшированные», поэтому при попытке отобразить результат не удается: 

**TypeError: Cannot read property 'name' of undefined**

Возможно, мне не хватает концепции ловушек useeffect.

Кто-нибудь знает, как это исправить?

Спасибо

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

попробуй: 

setTopten(response.data.filter(function(val){ return val!==undefined; }))
0 голосов
/ 02 апреля 2020

Вы должны преобразовать ответ в json с ожиданием ответа. json (); и затем используйте setState. 

useEffect(() => {         
        console.log("useEffect TopTen has been called!");   
        const fetchdata = async () => {
        const response = await api.topTen();  // this calls axios(url)
        const responseData = await response.json();
        setLoading(false);
        setTopten(responseData.data);    
        setError(responseData.error);    
    };

    fetchdata ();     
}, []);
...