Когда я веду консольный журнал полученных данных, они отображаются как неопределенные, но они появляются при обновлении.

У меня есть эта функция в react для получения данных из моего django API:

const [filterData, setFilterData] = useState([]);

const fetchFilterData = async () => {
    const filter_url = 'http://127.0.0.1:8000/api/filters/'
    try {
      const response = await fetch(filter_url)
      const result = await response.json();
      setFilterData(result)
    } catch (error) {
      console.error('error fetching data: ', error);
    }


  }

и когда я пытаюсь console.log вывести данные, то сначала они отображаются как undefined, но если я что-то изменю в коде (например, добавлю пробел или новую строку) и сохраню, то найденные данные появятся и все будет работать нормально, но проблема в том, что я не могу вывести эти данные или передать их как prop в другие компоненты

Вот useEffect крючок: 

  useEffect(() => {
    fetchData();
    fetchFilterData();
  }, []);

и я пробовал регистрировать данные несколькими способами, но безрезультатно, сначала всегда возвращается undefined. Вот несколько способов, которые я пробовал:

import React from 'react'
import './Home.css'
// import { listOfHouses } from './mock-data'
import { useState, useEffect, useRef } from 'react'
import PopupTextBox from '../../Components/PopupTextBox/PopupTextBox'
import DropDown from '../../Components/DropDown/DropDown'

export default function Home() {
  const [data, setData] = useState([]);
  const [filterData, setFilterData] = useState([]);
  const [order, setOrder] = useState('asc');

  const fetchData = async () => {
    const houseList_url = 'http://127.0.0.1:8000//api/listings?price__lt=&price__gt=&apartment__block_name=&apartment__floor=&apartment__type=&apartment__view=&status=&type=';
    const result = await fetch(houseList_url);
    result.json().then(json => setData(json));
    // console.log(data)
  }

  const fetchFilterData = async () => {
    const filter_url = 'http://127.0.0.1:8000/api/filters/'
    try {
      const response = await fetch(filter_url)
      const result = await response.json();
      setFilterData(result)
    } catch (error) {
      console.error('error fetching data: ', error);
    }

    if(filterData) {console.log(filterData)} else {console.log("data is not defined")};

  }

  useEffect(() => {
    fetchData();
    fetchFilterData().then(console.log(filterData));
  }, []);

  const sorting = (col) => {
    if (order === 'asc') {
      const sorted = [...data].sort((a, b) =>
        a[col].toLowerCase() > b[col].toLowerCase() ? 1 : -1);
      setOrder('desc');
      setData(sorted);
    }
    if (order === 'desc') {
      const sorted = [...data].sort((a, b) =>
        a[col].toLowerCase() < b[col].toLowerCase() ? 1 : -1);
      setOrder('asc');
      setData(sorted);
    }
  }

  return (
    <div className='h-full grid grid-rows-[max-content_1fr]'>
      <div className='h-28 bg-blue-500 text-center'>
        <button className='button bg-teal-700' onClick={fetchData}>fetch</button>
        <div>
          {filterData && <DropDown people={filterData.all_blocks} />}
        </div>
      </div>
      <div className='bg-white'>
        <table className='table-auto w-full'>
          <thead className='bg-gray-300'>
          , , , , , , , ,

редактирование: вот более полный фрагмент кода, который я выполняю

это было потому, что const [fitlerData, setFilterData] = useState([])

и не const [fitlerData, setFilterData] = useState()

что означает, что когда я делал что-то вроде {filterData && <DropDown people={filterData.all_blocks} />} , он передавал пустой список и не ждал, пока данные действительно будут получены.

Теперь код выглядит примерно так:

export default function Home() {
  const [data, setData] = useState([]);
  const [filterData, setFilterData] = useState();
  const [order, setOrder] = useState('asc');

  const fetchData = async () => {
    const houseList_url = 'http://127.0.0.1:8000//api/listings?price__lt=&price__gt=&apartment__block_name=&apartment__floor=&apartment__type=&apartment__view=&status=&type=';
    const result = await fetch(houseList_url);
    result.json().then(json => setData(json));
  }

  const fetchFilterData = async () => {
    const filter_url = 'http://127.0.0.1:8000/api/filters/'
    try {
      const response = await fetch(filter_url)
      const result = await response.json();
      setFilterData(result)
    } catch (error) {
      console.error('error fetching data: ', error);
    }

  }

  useEffect(() => {
    fetchData();
    fetchFilterData();
  }, []);

  useEffect(() => {
    filterData ? console.log(filterData) : console.log('loading...')
  }, [filterData]);

  const sorting = (col) => {
    if (order === 'asc') {
      const sorted = [...data].sort((a, b) =>
        a[col].toLowerCase() > b[col].toLowerCase() ? 1 : -1);
      setOrder('desc');
      setData(sorted);
    }
    if (order === 'desc') {
      const sorted = [...data].sort((a, b) =>
        a[col].toLowerCase() < b[col].toLowerCase() ? 1 : -1);
      setOrder('asc');
      setData(sorted);
    }
  }

  const handleRefresh = () => {
    fetchData();
    fetchFilterData();
  }

  return (
    <div className='h-full grid grid-rows-[max-content_1fr]'>
      <div className='h-28 bg-blue-500 text-center'>
        <button className='button bg-teal-700' onClick={handleRefresh}>fetch</button>
        <div>
          {filterData
            ? <Fragment>
              <DropDown items={filterData.all_blocks} />
            </Fragment>
            : <div>loading...</div>
          }
        </div>
      </div>

Я ненавижу JavaScript :)

Вернуться на верх