React嵌套数组状态更新后未触发组件重新渲染问题

问题场景 #

定义了如下对象数组状态：

const [categories, setCategories] = React.useState([
    {
      id: 1,
      title: 'Top Picks',
      subTitle: "Today's hottest stuff",
      images: [],
      searchQuery: 'shoes',
    },
    // 其他分类...
]);

在useEffect中尝试通过API请求更新状态：

React.useEffect(() => {
    const newCategories = categories.map(category => {
      fetch(`https://api.pexels.com/v1/search?query=${category.searchQuery}&per_page=10`, {
        headers: {
          'Authorization': apiKey,
        },
      }).then(r => {
        r.json().then(convertedJson => {
          category.images = convertedJson.photos;
        });
      });
      return category;
    });
    setCategories(newCategories);
  }, []);

子组件通过以下方式渲染：

{categories.map((category, i) => (
        <CategorySlider {...category} key={i}/>
      ))}

执行后子组件始终不重新渲染，无法展示请求到的图片数据。

问题原因 #

1. 异步请求时序错误：fetch是异步操作，setCategories(newCategories)会在所有请求完成前执行，此时newCategories里的每个category的images还是初始空数组。后续请求完成后直接修改category.images，但状态已经提前设置，React不会感知到这个延迟修改。
2. 直接修改状态对象：map生成的新数组里的元素还是原category对象的引用，category.images = convertedJson.photos属于直接修改原状态对象，违反了React状态不可变更新的原则，React无法检测到对象引用变化，因此不触发重渲染。
3. 索引作为key的潜在问题：虽不是本次不渲染的核心原因，但用数组索引作为key，当数组元素顺序变化时可能导致子组件渲染异常，建议使用唯一标识。

解决方案 #

1. 等待所有异步请求完成后更新状态 #

用Promise.all统一处理所有API请求，确保所有数据返回后再更新状态。

2. 采用不可变更新方式 #

创建新的分类对象，而非直接修改原状态对象，保证状态的引用变化能被React检测到。

3. 替换key为唯一标识 #

用分类的id作为key，避免索引key的潜在问题。

修正后的代码如下：

修正后的useEffect

React.useEffect(() => {
  // 收集所有请求的Promise
  const fetchTasks = categories.map(category => {
    return fetch(`https://api.pexels.com/v1/search?query=${category.searchQuery}&per_page=10`, {
      headers: {
        'Authorization': apiKey,
      },
    })
    .then(response => response.json())
    .then(data => {
      // 返回新对象，复制原属性并替换images
      return {
        ...category,
        images: data.photos
      };
    });
  });

  // 等待所有请求完成后更新状态
  Promise.all(fetchTasks).then(updatedCategories => {
    setCategories(updatedCategories);
  });
}, []);

修正后的子组件渲染

{categories.map((category) => (
  <CategorySlider {...category} key={category.id}/>
))}

效果说明 #

• Promise.all确保所有API请求拿到数据后，再将包含完整图片数据的新数组传给setCategories，此时状态更新会触发组件重渲染。
• 每个请求返回新的分类对象，通过扩展运算符复制原属性并更新images，保证了状态的不可变更新，React能检测到数组和元素的引用变化，正确触发子组件重新渲染。
• 使用category.id作为key，让React能准确识别每个子组件的身份，避免不必要的渲染问题。

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