React组件<GetCarInfo>无法渲染无序列表的问题排查

问题1：初始用普通数组无法渲染的根本原因 #

React组件的重新渲染完全依赖状态（useState/useReducer）、props或上下文（Context）的变化。你最初的写法犯了核心错误：用普通JavaScript变量存储异步数据，而非React状态。

举个你的初始逻辑的简化反例：

function GetCarInfo() {
  let arrTitle = []; // 普通变量，React无法追踪变化
  
  fetch('/api/cars')
    .then(res => res.json())
    .then(data => {
      // 异步填充数组，但此时组件已经完成首次渲染
      data.forEach(item => arrTitle.push(item.key));
    });

  // 首次渲染时arrTitle是空数组，后续数组变化不会触发重新渲染
  return <ul>{arrTitle.map(item => <li key={item}>{item}</li>)}</ul>;
}

• 组件首次渲染时，arrTitle是空的，所以页面渲染空列表。
• fetch是异步操作，等API返回数据并填充arrTitle时，组件已经渲染完成。但因为arrTitle不是状态变量，React无法感知到它的更新，不会触发组件重新渲染，页面因此始终没有内容。

后来你把数据存入useState的info状态，但依然用arrTitle渲染——这等于没利用React的状态更新机制：只有调用setInfo更新状态时，React才会触发重新渲染，而你渲染的是未同步的arrTitle，自然还是无效。改用info状态渲染后，setInfo触发了组件重新渲染，此时info已经持有API返回的数据，列表就能正常渲染。

问题2：组件内console.log执行两次的原因 #

这是React**开发环境下Strict Mode（严格模式）**的默认行为。Strict Mode会刻意重复调用组件函数、useEffect等生命周期相关函数，目的是帮你提前发现代码中的潜在问题：

• 比如是否存在非幂等的副作用（重复执行会导致错误的操作）。
• 或者是否在组件函数内进行了不该做的操作（比如直接修改DOM、创建全局可变变量）。

这个重复执行的行为仅在开发环境存在，生产环境下Strict Mode会自动禁用，console.log只会执行一次。

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