React中useState动态设置数组状态失效问题排查

1. map 回调未返回元素（最核心原因） #

你的数组状态其实已经成功设置了，但渲染列表时没有返回JSX元素，导致页面看不到内容。箭头函数用大括号包裹逻辑时，必须显式写return，否则默认返回undefined。

修复方式二选一：

• 显式添加return：

attachments.map((ele) => {
  return <div>{ele}</div>
})

• 改用小括号包裹JSX（箭头函数隐式返回）：

attachments.map((ele) => (
  <div>{ele}</div>
))

2. async/await 与 then 混用（代码冗余） #

fetchMedia里同时用了await和then，属于冗余写法，直接用await接收结果更简洁：

const fetchMedia = async ()=> {
  setAttachments([]);           
  const response = await apiCall();
  setAttachmentValues(response);                
}

3. 缺少列表元素的key属性（React强制要求） #

React渲染列表时，必须给每个元素添加唯一的key属性，否则会触发性能警告：

attachments.map((ele, index) => (
  <div key={index}>{ele}</div>
))
// 优先使用ele自身的唯一标识（比如ele.id）代替index，避免组件重渲染异常

4. useEffect依赖项（潜在逻辑漏洞） #

如果item props变化时需要重新拉取数据，必须把item加入useEffect的依赖数组，否则组件不会触发重新请求：

useEffect(() => {
  fetchMedia();
}, [item]); // 加入item作为依赖

验证状态是否更新 #

如果想确认attachments状态是否真的设置成功，可以加个日志监听：

useEffect(() => {
  console.log('当前attachments:', attachments);
}, [attachments]);

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