Реагировать на setState с вложенным Json

#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

Редактировать: это ответ от вызова api Ответный вызов Api

Комментарии:

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].Федеральная земля