React中能否用多个useState？如何优化API请求后的状态赋值代码

你完全可以像代码里那样使用多个useState，而且你的代码能正常运行就说明这种写法是有效的。不过从代码简洁性和可维护性来看，这种分散管理相关数据的方式确实有优化空间。

优化方案：合并为单个useState管理结构化数据 #

把分散的多个state合并成一个对象类型的state，集中管理所有和quiz相关的数据：

// 初始化一个包含所有需要字段的state对象
const [quizData, setQuizData] = useState({
  shareCode: '',
  createdBy: '',
  className: '',
  subjectName: '',
  avatar: '',
  startDate: '',
  endDate: '',
  quizStatus: ''
});

useEffect(() => {
  commonApiCall(`url${var}`, {}, 'get')
    .then((response) => {
      if (response.status_code === 200) {
        const quiz = response.response.quiz;
        // 一次性更新整个quizData对象
        setQuizData({
          shareCode: quiz.share_code,
          createdBy: quiz.created_by,
          className: quiz.class_id,
          // 用可选链避免字段不存在时抛出错误，同时设置默认值
          subjectName: quiz.subject_meta?.subject_name || '',
          avatar: quiz.image_avatar?.image_path || '',
          startDate: quiz.start_date,
          endDate: quiz.end_date,
          quizStatus: quiz.status
        });
      }
    })
    .catch((error) => {
      console.error(error);
    });
}, []);

优化的好处 #

• 减少冗余代码：不用再重复声明多个useState，代码结构更紧凑
• 数据集中管理：所有和quiz相关的状态都在一个对象里，后续维护、修改逻辑更清晰
• 更高效的状态更新：虽然React会自动批量处理多个setState调用，但合并成一次更新能减少不必要的渲染触发（差异不大，但更符合最佳实践）
• 扩展性更强：后续如果需要新增和quiz相关的字段，直接在state对象里添加即可，不用再新增useState

额外提示 #

如果接口返回的quiz对象字段和你需要的state字段大部分可以对应，也可以直接解构赋值，但要注意过滤掉不需要的字段，避免存储冗余数据：

setQuizData({
  shareCode: quiz.share_code,
  createdBy: quiz.created_by,
  className: quiz.class_id,
  ...(quiz.subject_meta && { subjectName: quiz.subject_meta.subject_name }),
  ...(quiz.image_avatar && { avatar: quiz.image_avatar.image_path }),
  startDate: quiz.start_date,
  endDate: quiz.end_date,
  quizStatus: quiz.status
});

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