React嵌套fetch中setState不触发渲染问题咨询

首先，咱们先揪出你代码里的核心问题：直接修改了state对象，没遵循React状态不可变的原则，这才导致setState没触发重渲染，不得不靠forceUpdate()来"强行续命"。

问题拆解 #

1. 错误的setState用法
   你现在的写法是直接修改传入的state参数：

this.setState(state => {
  state.deck = cards;
});

React的状态设计是不可变的——你必须返回一个新的状态对象，而不是直接修改原state。React通过对比状态的引用变化来判断是否需要重渲染，直接改原对象的话，引用没变化，React就会觉得"状态没更新啊"，自然不会触发重渲染。

2. 嵌套fetch的回调地狱（可选优化）
   嵌套的fetch写法可读性差，也不容易统一处理错误，换成async/await能让代码清爽很多。

3. 冗余的key取值
   render里的key={this.state.deck[i].code}完全可以简化成key={card.code}，毕竟你已经在遍历deck，每个循环项就是card，没必要绕一圈通过索引去取。

修改后的代码 #

import React, { Component } from 'react';
import Card from './Card';

class Deck extends Component {
  constructor(props) {
    super(props);
    this.state = {
      deck: [],
    };
  }

  async componentDidMount() {
    try {
      // 第一个fetch请求（如果返回值没用，直接await即可）
      await fetch('URL1').then(res => res.json());

      // 第二个fetch请求
      const response = await fetch(`URL2`);
      const { cards } = await response.json();

      // 正确的setState：传入新的状态对象
      this.setState({ deck: cards });
    } catch (error) {
      // 统一处理请求错误，避免异常冒泡
      console.error('请求出错啦:', error);
    }
  }

  render() {
    const { deck } = this.state;
    return deck.map(card => <Card card={card} key={card.code} />);
  }
}

export default Deck;

为什么这样改就管用？ #

• 正确的setState：this.setState({ deck: cards })直接传入新的数组对象，React能检测到deck的引用变化，自然会触发组件重渲染，再也不需要forceUpdate()了。
• async/await：把嵌套回调改成线性代码，可读性和可维护性都上来了，还能用try/catch统一处理两个请求的错误，不会漏掉异常情况。
• 简化key取值：直接用card.code更简洁，也符合React遍历列表的最佳实践。

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