当我console.log获取数据时，它显示为未定义，但当我刷新时它会出现

Question

我有这个函数可以从我的 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

但如果我更改代码中的某些内容（例如添加空格或新行）并保存获取的数据，则会出现并且一切正常，但是问题是我无法渲染该数据或将其作为道具传递给其他组件

这是

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'>
          , , , , , , , , 

编辑： 这是我正在运行的代码的更完整片段

Answer 1

那是因为

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 :)