为什么React函数组件中调用setState函数会返回undefined？

问题根因 #

你当前编写的是React函数式组件，函数式组件不存在类组件的this实例，默认this值为undefined，这是报错的核心原因。

错误点说明 #

• 你通过useState声明的setSentidata、setTrans、setEntidata都是状态更新函数，函数式组件中所有useState返回的更新函数天生已经绑定了当前组件的作用域，完全不需要手动执行bind操作。
• 你写的this.setSentidata = this.setSentidata.bind(this)是类组件的专属写法，完全不适用于函数式组件，直接删除这行代码即可解决报错。

正确用法示例 #

普通场景调用 #

如果是在当前组件内部更新状态，直接调用更新函数即可：

// 示例：在回调中更新sentidata
const handleSentimentDataChange = (newData) => {
  setSentidata(newData)
}

暴露方法给外部组件调用 #

如果你是要把setSentidata暴露给父组件调用，可以搭配forwardRef + useImperativeHandle实现：

import { useState, useSocket, forwardRef, useImperativeHandle, useRef } from 'react'

const StreamingCaptionViewer = forwardRef((props, ref) => {
  const [trans, setTrans] = useState(null);
  const [sentidata, setSentidata] = useState();
  const [entidata, setEntidata] = useState();
  const socket = useSocket('transcript', (data) => {
    console.log(`data recieved: ${JSON.stringify(data)}`);
    setTrans(data);
  });

  // 将更新方法暴露给父组件
  useImperativeHandle(ref, () => ({
    updateSentidata: setSentidata
  }))

  const ErrorMessage = {
    color: 'red',
    fontSize: '13px',
    visibility: 'hidden',
  };
  // 剩余组件渲染逻辑
  return <div>组件内容</div>
})

// 父组件调用示例
const ParentComponent = () => {
  const viewerRef = useRef(null)
  // 触发子组件的状态更新
  const handleUpdate = () => {
    viewerRef.current.updateSentidata({/* 新的sentidata值 */})
  }
  return <StreamingCaptionViewer ref={viewerRef} />
}

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