useEffect内useState更新不即时 首次渲染报.map非函数错误

• useState初始化file为数组类型，但接口返回的res.data是单个文件对象而非数组，执行setFile(res.data)后file类型从数组变为普通对象，普通对象不存在.map方法，直接触发类型报错。
• useEffect内的接口请求在组件首次挂载完成后才会执行，首次渲染阶段读取到的file永远是初始值，请求返回后触发setState才会启动第二次渲染，这是React异步更新的正常表现，不是异常。
• 空依赖数组漏了id依赖，当id变化时不会重新触发接口请求，会出现数据不更新的问题。

根据实际业务场景二选一即可，不要混着用。

场景1：需要遍历渲染（比如后续要扩展为列表、或者要把单条数据按数组逻辑处理） #

核心原则是保证file始终为数组类型，全程不发生类型跳变。

1. 修改请求逻辑，拿到返回值后统一做类型兜底：

useEffect(() => {
  axios.get(`http://localhost:8080/files/public/${id}`)
    .then(res => {
      console.log(res.data);
      // 兼容返回数组/单个对象两种情况，保证传给setFile的永远是数组
      const fileData = Array.isArray(res.data) ? res.data : [res.data];
      setFile(fileData);
    })
}, [id]); // 补全依赖项，id变化时自动重新拉取数据

2. 渲染逻辑增加加载态判断，避免空状态下的异常：

{
  file.length === 0 
    ? <span>文件加载中...</span>
    : file.map((row, index) => {
        // 列表渲染记得加key，用数据唯一id优先，没有再用index兜底
        return <li key={row.id || index}>{row.name || index}</li>
      })
}

场景2：仅需展示单个文件数据，不需要遍历 #

核心原则是不要给单对象状态用数组初始化，也不要调用数组方法。

1. 修改useState初始化值，匹配单对象的类型：

// 单文件对象初始值设为null即可，和数组场景做区分
const [file, setFile] = useState(null);

2. 请求逻辑保持直接赋值即可，不需要包数组：

useEffect(() => {
  axios.get(`http://localhost:8080/files/public/${id}`)
    .then(res => {
      console.log(res.data);
      setFile(res.data);
    })
}, [id]);

3. 渲染逻辑去掉map，增加空值判断后直接读取对象属性：

{
  !file 
    ? <span>文件加载中...</span>
    : (
        <div className="file-card">
          <p>文件名：{file.name}</p>
          <p>文件地址：{file.url}</p>
          <p>上传时间：{file.createTime}</p>
        </div>
      )
}

• React状态要保持类型稳定，初始化是什么类型，后续setState就要传入同类型的值，类型随意跳变是这类.xxx is not a function报错的最常见诱因。
• 所有依赖异步请求获取的状态，渲染时必须做空值/加载态判断，因为首次渲染时请求还未返回，状态为初始值，直接调用方法、读取深层属性很容易触发报错。
• useEffect的依赖数组要包含所有内部用到的外部变量，否则会出现闭包引用旧值、参数变化不重新执行的问题。

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