React fetch API не отображает никаких данных
Я создаю поставщика в своем собственном мобильном приложении для реагирования, и когда я пытаюсь получить API и установить данные в состояние, ответные данные не определены или равны нулю. Я не знаю, что не так. Сначала он больше не работал.
Может ли кто-нибудь сказать мне, что происходит не так? Вот мой код:
const {useState, useEffect} = React;
const DataApiContext = React.createContext(null);
function DataApiProvider({children}) {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://data.rivm.nl/covid-19/COVID-19_uitgevoerde_testen.json')
.then((response) => response.json())
.then(response => setData(response))
.catch((error) => console.error(error));
}, []);
console.info(data)
return (
<DataApiContext.Provider value = {{data}}>
{children}
</DataApiContext.Provider>
)
}
ReactDOM.render(<DataApiProvider />, document.getElementById('root'));<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id = "root"></div>Что ж, для меня это показывает, что данные все еще нулевые
Я обновил ваш вопрос, сделав его работающим примером. Помимо создания контекста и console.info, он остался без изменений. Если вы запустите его и подождите достаточно долго, он действительно сработает (вы можете получить несколько диалогов о не отвечающих страницах, выберите «Подождите»).
О да, я вижу данные без памяти, но тогда я не знаю, что не так в моем приложении. Поскольку значение данных остается нулевым при использовании setData (data) внутри выборки
Чтобы ответить на этот вопрос, я думаю, нам понадобится больше контекста. Где вы видите null? Это дочерний элемент компонента DataApiProvider?
Хм, когда я делаю console.info (data) из переменной данных useState. Его следует заменить на тело ответа api. Ну, это было сначала, но не сейчас. Теперь он по-прежнему говорит null
Я не понимаю. Тот же самый журнал консоли в вопросе восходит к тому, что в какой-то момент говорится о null?
Да, верно, в console.info в вопросе будет указано значение null. Но когда я пытаюсь получить доступ к переменной данных внутри другого компонента, он все еще будет показывать const [data, setData] = useState (null), поэтому null
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы должны передать объект значения как объект.
<DataApiContext.Provider value = {data}>
{children}
</DataApiContext.Provider>
Вы уверены, что проблема? Я просто запустил этот код, и он сработал. Загрузка данных заняла около 30 секунд, но это сработало.