使用react从json服务器获取数据并在UI中显示的同步问题？

Question

我可以从 json-server 获取数据并在 UI 中显示，但有一个问题总是让我困惑。获取数据是一个异步过程，因此当我尝试获取数据并设置状态时，实际上此操作需要时间来设置状态。因此，有时当我尝试获取数据并在 UI 中显示时，数据会因异步过程而出现未定义的情况。我通过使用三元运算符克服了这种情况，例如如果数据未定义，则在重新渲染之前显示或不显示。但是当我不想使用三元时，它会导致错误。这是什么原因以及为什么有时会发生？

import React, { useEffect, useState } from 'react'
import BurgerImage from '../assets/burger.jpg';
import axios from 'axios';

export default function Data() {

  const [data, setData] = useState();


  const getData = async () => {

    let response = await axios('http://localhost:3000/burger', {});
    setData(response.data);

  }

  useEffect( () => {

    getData()

  }, [])

  return (
    <div>
      {data.map((item, index) => 
      <div key={index}>
        <h3>{item.name}</h3>
        <img src={BurgerImage} alt="test" />
        <p>{item.content}</p>
        <p>{item.price}</p>
      </div>
      )}
    </div>
  )
}

我遇到如下错误：

我还发现，当我将空数组作为数据状态的初始值时，

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

并且当使用

setData([...data, ...response.data])

设置数据时，我不再需要三元运算符来在UI中显示数据。这是什么原因呢？

Answer 1

这是什么原因？

由于您尚未为 data 设置

default

值，因此它最初将设置为

undefined

。

map

函数只能在 arrays 上调用，这就是您的应用程序崩溃的原因。

const [data, setData] = useState([]); // use the default value to avoid the error

您可以使用 可选链接 (

?

)，因此仅当

map

存在时才会调用

data

函数。

{data?.map((...)}
 // ^^^