React从json-server异步取数渲染UI的同步问题及疑问

为什么不用三元判断会报错？ #

你当前代码里const [data, setData] = useState();没有给state设置初始值，组件第一次渲染时，data的默认值是undefined。而map是数组专属方法，undefined不存在这个属性，直接调用data.map()就会触发报错：

无法读取undefined的属性'map'

用三元运算符（比如{data ? data.map(...) : null}）的核心是先判断data是否已被赋值（不再是undefined），只有当数据请求完成、setData更新state后，才会执行map逻辑，自然不会触发报错。

为什么初始值设为空数组就无需三元判断？ #

当你把state初始值设为空数组const [data, setData] = useState([])时：

1. 组件第一次渲染时，data是空数组[]，空数组本身可以调用map方法，只是因为没有元素，不会生成任何DOM节点，不会触发报错；
2. 异步请求完成后，用setData([...data, ...response.data])把接口返回的数据合并到原数组中，此时data变成包含有效数据的数组，map就能正常渲染对应内容。

原始代码示例 #

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

内容的提问来源于stack exchange，提问作者brkcnbaz