useEffect中setState未赋值问题求助（TypeScript环境）

核心原因 #

React中useState的状态更新是异步批量处理的，调用setCodeTemplate后，并不会立即更新当前作用域内的codeTemplate变量，你打印的仍然是初始的空数组[]。这就导致后续codeTemplate[0]['boilerplate']试图访问undefined的属性，触发类型错误。

解决方案 #

有两种可靠的修复方式：

方案1：直接使用响应数据设置code

既然已经在then回调里拿到了完整的resp.data.question_template，直接用这个值来设置code，不需要依赖尚未更新的状态：

// 给状态指定TypeScript类型，避免隐式any
interface CodeTemplateItem {
  boilerplate: string;
  // 其他属性根据实际数据结构补充
}

const [codeTemplate, setCodeTemplate] = useState<CodeTemplateItem[]>([])
const [code, setCode] = useState("")

useEffect(() => {
    getQuestion({questionName}.questionName)
    .then(resp => {    
      const templateData = resp.data.question_template;
      console.log(templateData);
      setCodeTemplate(templateData);
      // 直接用拿到的原始数据设置code，加长度判断避免空数组报错
      if (templateData.length > 0) {
        setCode(templateData[0].boilerplate);
      }
    })
  }, [])

方案2：监听codeTemplate的变化更新code

如果业务逻辑需要依赖codeTemplate状态更新后的结果，可以用额外的useEffect监听状态变化：

interface CodeTemplateItem {
  boilerplate: string;
  // 其他属性根据实际数据结构补充
}

const [codeTemplate, setCodeTemplate] = useState<CodeTemplateItem[]>([])
const [code, setCode] = useState("")

useEffect(() => {
    getQuestion({questionName}.questionName)
    .then(resp => {    
      const templateData = resp.data.question_template;
      console.log(templateData);
      setCodeTemplate(templateData);
    })
  }, [])

// 监听codeTemplate状态变化，更新code
useEffect(() => {
  if (codeTemplate.length > 0) {
    setCode(codeTemplate[0].boilerplate);
  }
}, [codeTemplate])

额外提示 #

在TypeScript中，建议给状态明确指定类型（比如上面的CodeTemplateItem接口），这样能提前捕获类型错误，避免运行时的属性访问问题。

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