#javascript #arrays #json #reactjs
#javascript #массивы #json #reactjs
Вопрос:
Я только начал учить себя реагировать. В моем первом проекте я пытаюсь создать несколько базовых диаграмм с данными из набора данных Corona. Набор данных создается моим собственным restapi и выглядит следующим образом:
[{
"Bundesland": "Bayern",
"Landkreis": "LK Erlangen-Hu00f6chstadt",
"Altersgruppe": "A80 ",
"Geschlecht": "W",
"AnzahlFall": 1,
"AnzahlTodesfall": 0,
"Meldedatum": 1577836800000,
"IdLandkreis": "09572",
"Datenstand": "05.01.2021, 00:00 Uhr",
"NeuerFall": 0,
"NeuerTodesfall": -9,
"NeuGenesen": 0,
"AnzahlGenesen": 1
},
{
"Bundesland": "Nordrhein-Westfalen",
"Landkreis": "SK Ku00f6ln",
"Altersgruppe": "A35-A59",
"Geschlecht": "W",
"AnzahlFall": 1,
"AnzahlTodesfall": 0,
"Meldedatum": 1577923200000,
"IdLandkreis": "05315",
"Datenstand": "05.01.2021, 00:00 Uhr",
"NeuerFall": 0,
"NeuerTodesfall": -9,
"NeuGenesen": 0,
"AnzahlGenesen": 1
}]
После того, как я извлек данные с помощью useEffect-Hook, я пытаюсь использовать useState-Hook для объявления новой переменной данных, которую я могу передавать другим компонентам react
Мой текущий метод кода выглядит следующим образом:
const [corona, setCorona] = useState([])
useEffect(() => {
d3.json(path).then(res => {
let data = res
setCorona(data)
}).catch(err =>{console.log(err)})
},[])
Я предполагаю, что вызов api работает, так как я могу записать результат в журнал. Однако я не могу объявить corona, используя мой текущий метод setCorona
Комментарии:
1. Если вы убедились, что для corona установлено правильное значение, то я не уверен, в чем заключается ваша фактическая проблема? Я не вижу ничего явно неправильного в этом фрагменте кода.
2. Может быть проблема в том, что я пытаюсь использовать весь json в качестве значения для corona?
3. Хотя вы можете столкнуться с проблемами производительности при рендеринге слишком большого набора данных, в его использовании нет ничего плохого. Однако ваш вопрос на самом деле не имеет смысла. Вы не объявляете corona при вызове setCorona. В основном вы можете думать об этом как о назначении corona.
Ответ №1:
setState React является асинхронным. Не отражайте изменение сразу (например, console-log сразу после setState). Я предполагаю, что в этом-то и проблема.
import React, { useEffect, useState } from 'react';
const data = [{
"Bundesland": "Bayern",
"Landkreis": "LK Erlangen-Hu00f6chstadt",
"Altersgruppe": "A80 ",
"Geschlecht": "W",
"AnzahlFall": 1,
"AnzahlTodesfall": 0,
"Meldedatum": 1577836800000,
"IdLandkreis": "09572",
"Datenstand": "05.01.2021, 00:00 Uhr",
"NeuerFall": 0,
"NeuerTodesfall": -9,
"NeuGenesen": 0,
"AnzahlGenesen": 1
},
{
"Bundesland": "Nordrhein-Westfalen",
"Landkreis": "SK Ku00f6ln",
"Altersgruppe": "A35-A59",
"Geschlecht": "W",
"AnzahlFall": 1,
"AnzahlTodesfall": 0,
"Meldedatum": 1577923200000,
"IdLandkreis": "05315",
"Datenstand": "05.01.2021, 00:00 Uhr",
"NeuerFall": 0,
"NeuerTodesfall": -9,
"NeuGenesen": 0,
"AnzahlGenesen": 1
}]
function Fun(props) {
const [corona, setCorona] = useState([])
const handleClick = () => {
setCorona(data)
}
// This function logs value of corona.
useEffect(() => {
console.log('Logging corona to prove that it is updated.', corona);
}, [corona]);
return (
<div>
<button onClick={handleClick}> Click to update update corona. </button>
</div>
);
}
export default Fun;
Комментарии:
1. спасибо за ответ, он очень помогает мне понять логику, лежащую в основе реакции! Вместо того, чтобы использовать handleClick, как вы делали в своем примере кода, могу ли я создать функцию, которая вызывает setState, например, каждые 30 секунд?
2. @rin_o Проверьте это. reactgo.com/react-setinterval
Ответ №2:
Я действительно не понимаю, что ты хочешь сделать .. — Что-то вроде этого?
const [corona, setCorona] = useState([])
useEffect(() => {
d3.json(path).then(res => {
setCorona(res.data)
}).catch(err =>{console.log(err)})
},[])
return (
<div> {corona.map()..... and so on} </div>
OR
<div> {corona[0].Bundesland} </div>
)
Комментарии:
1. Я пытаюсь установить json как массив в переменную corona, чтобы я мог реализовать значения из массива в html или передать их другому компоненту react. Проблема в том, что corona является пустым массивом даже после вызова setCorona()
2. @rin_o первая консоль регистрирует ‘res’ после ‘then’. Посмотрите, что вы получили с сервера. Затем выберите правильный объект и установите для него корону состояния. Затем добавьте еще один консольный журнал непосредственно перед возвратом, чтобы увидеть, какое значение будет повторно передано в этой переменной. Это должно сработать.
3. @ZiedHf спасибо за ваш вклад, он мне очень помог! Однако, если я использую приведенный выше пример, я получаю TypeError: Не удается прочитать свойство ‘Bundesland’ undefined. Массив по-прежнему пуст. Но, если я сосредоточусь на одном конкретном значении из json, я могу вернуть значение в html
4. @rin_o Если значение corona по умолчанию равно null, не определено или является пустым массивом, то обязательно произойдет сбой вашего приложения. Вместо этого напишите это : corona[ amp;amp; corona[0] amp;amp; corona[0].Федеральная земля