React中如何将接口返回数据存入state并解析responses属性？

我正在进行React开发，调用ReviewerService.getReviewers()接口会返回如下格式的数组：

[
  {
    id: 1,
    firstName: 'John',
    lastName: 'Doe',
    email: 'johndoe@aol.com',
    responses: '{"q1":"yes","q2":"no","q3":"yes","rating":4}'
  },
  {
    id: 2,
    firstName: 'bob',
    lastName: 'jefferson',
    email: 'bob@aol.com',
    responses: '{"q1":"bob","q2":"yes","q3":"yes","rating":5}'
  }
]

组件state初始化为{ reviewers: [] }，需要把接口返回的数据存入reviewers，同时解析其中的responses属性，方便访问内部字段。以下是我写的错误代码：

class ListReviewsComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      reviewers: [],
    };
  }

  async componentDidMount() {
    await ReviewerService.getReviewers().then((res) => {
      this.setState({ reviewers: res.data });
    });

  this.setState({ reviewers.responses: JSON.parse(this.state.reviewers.responses)}); // error
 
  }
}

错误分析 #

• 同时混用await和.then()属于冗余写法，二者选其一即可；
• setState是异步操作，调用后无法立刻通过this.state获取更新后的状态；
• reviewers是数组，不能直接访问this.state.reviewers.responses，需要遍历数组中每个对象；
• setState语法错误，不能用reviewers.responses作为键名，应生成新数组后更新整个reviewers状态。

正确实现方式 #

在获取接口数据后，先遍历数组对每个元素的responses进行JSON解析，再将处理后的数组存入state：

class ListReviewsComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      reviewers: [],
    };
  }

  async componentDidMount() {
    // 用await处理异步请求，无需嵌套then
    const res = await ReviewerService.getReviewers();
    // 遍历处理每个reviewer，解析responses为对象
    const processedReviewers = res.data.map(reviewer => ({
      ...reviewer,
      responses: JSON.parse(reviewer.responses)
    }));
    // 更新state
    this.setState({ reviewers: processedReviewers });
  }
}

额外优化：添加错误处理 #

如果接口返回的responses可能存在格式错误，可以加上异常捕获，避免解析失败导致页面崩溃：

const processedReviewers = res.data.map(reviewer => {
  let parsedResponses = {};
  try {
    parsedResponses = JSON.parse(reviewer.responses);
  } catch (err) {
    console.error('解析responses失败:', err);
  }
  return {
    ...reviewer,
    responses: parsedResponses
  };
});

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