Не удается получить доступ к массиву в операторе возврата UseEffect - PullRequest
Новая
       5

Не удается получить доступ к массиву в операторе возврата UseEffect

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

Я получаю данные в React, используя ax ios внутри хука useEffect. Когда я консольно регистрирую данные изнутри ловушки useEffect, все в порядке, но когда я пытаюсь получить к ним доступ в операторе return, он возвращает Cannot read свойство 'Con' of undefined.

Вот мой код: 

    import React, { useState, useEffect } from "react";
import axios from 'axios'
import './App.css';

export default function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/api/comRes', {headers:{"Access-Control-Allow-Origin": "http://localhost:3000/"}})
  .then(function (data) {

    setData(data.data);
console.log(data.data.Con[0])

   })}, []);

  return (

    <div className="grid-container">
    <div className="menu"></div>
  <div className="dashboard">{data.data.Con[0]}</div>
  </div>

  );

это файл console.log всего набора данных: 

{_id: "5e85c1241c9d440000e730c7", Con: Array(30), Lab: Array(30), LibDem: Array(30), Other: Array(30), …}
_id: "5e85c1241c9d440000e730c7"
Con: (30) [47, 50, 44, 33, 35, 41, 43, 54, 63, 34, 42, 59, 49, 48, 52, 39, 39, 45, 32, 39, 49, 43, 37, 47, 50, 46, 57, 45, 57, 56]
Lab: (30) [31, 28, 34, 47, 42, 33, 35, 23, 19, 44, 34, 21, 28, 29, 34, 36, 39, 31, 11, 29, 33, 45, 52, 41, 30, 38, 28, 29, 25, 22]
LibDem: (30) [9, 9, 10, 9, 11, 11, 8, 8, 9, 10, 9, 9, 14, 9, 4, 8, 8, 10, 6, 5, 10, 8, 5, 7, 11, 7, 9, 14, 11, 14]
Other: (30) [0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0]
Brexit: (30) [3, 3, 2, 0, 3, 2, 4, 3, 1, 2, 3, 2, 1, 2, 4, 4, 2, 4, 1, 4, 3, 3, 2, 2, 5, 3, 2, 4, 1, 3]
Green: (30) [4, 4, 4, 6, 3, 5, 5, 5, 2, 4, 5, 3, 4, 4, 3, 4, 4, 5, 3, 1, 4, 2, 3, 3, 4, 5, 4, 8, 4, 5]
SNP: (30) [4, 5, 4, 4, 4, 8, 3, 6, 3, 4, 5, 4, 3, 4, 4, 6, 6, 3, 47, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Plaid: (30) [1, 1, 1, 0, 1, 1, 1, 2, 1, 1, 1, 2, 0, 2, 0, 1, 2, 1, 0, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Date: "20/02/2020"
__proto__: Object

Это отчет об ошибке, когда я пытаюсь получить доступ к {Data.Con [0]} из возврата заявление: 

TypeError: Cannot read property '0' of undefined

Ответы [ 2 ]

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

В первый раз, когда ваш компонент рендерит, данные могут еще не быть там.

Я бы порекомендовал установить данные на null по умолчанию, поэтому измените эту строку

const [data, setData] = useState([]);

до

const [data, setData] = useState(null);

Затем, , прежде чем пытаться что-то визуализировать, проверьте, есть ли оно 

<div className="dashboard">{data ? data.Con[0] : null }</div>

Если у вас все еще будут проблемы, вы, возможно, захотите опубликовать структуру данных ответов топора ios.

Обновление # 1 

import React, { useState, useEffect } from "react";

import axios from 'axios'
import './App.css';

export default function App() {
    const [data, setData] = useState();

    useEffect(() => {
        axios.get('/api/comRes', { headers: 
            { "Access-Control-Allow-Origin": "http://localhost:3000/" } 
        }).then(function (data) {
                setData(data.data);
            })
    }, []);

    return (
        <div className="grid-container">
            <div className="menu"></div>
            <div className="dashboard">{data ? data.Con[0] : null}</div>
        </div>

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

Это должно быть просто {data.Con[0]}

...