Блог

Я новичок в том, чтобы реагировать. Поэтому я разрабатываю приложение, которое получает данные из api. Поэтому я использовал этот фрагмент кода для получения данных из api.

 let [jsonData,setJsonData]=useState([]);

useEffect(() => {
    async function fetchData() {
        try {
            const response = await fetch(apiURL);
            const json = await response.json();
            setJsonData(json.components.map(function(item){
                return item;
            }))
        } catch (error) { }
    }
    fetchData();
    
}, [])
const [table1,table2,pieChart]=jsonData;
console.log(table1,table2,pieChart)
 

В этом-то и проблема. Когда я запускаю это, я получаю такой вывод.

В этом, почему в первом вызове есть два выхода, и в первом выводе, почему я получаю 3 неопределенных вещи.Мне просто нужно получить только те данные JSON при первом вызове.Как мне получить только необходимые данные и не получать эти неопределенные вещи.

Заранее спасибо.

Вы не можете избежать того факта, что ваша функция выборки является асинхронной, но вы можете сделать что-то вроде этого:

 if (!jsonData.length) return <div>loading...</div>;
 

Вы выполняете асинхронный запрос в своей функции useEffect, что означает, что ваша функция выборки будет выполняться параллельно текущему коду, но она завершится через некоторое время. Итак, в первый раз вы утешаете.запишите те значения, которые эффект использования еще не завершен. В конце вашего эффекта использования вы использовали setJsonData, который приведет к повторному отображению компонента в обновленном состоянии, поэтому вы видите вторую консоль.наконец-то войдите в журнал с правильными значениями.