在useEffect中创建异步函数仍遇类型错误的问题求助

1. 修复TypeScript类型错误 #

IDE提示的类型错误源于content状态的初始类型为undefined，但你传入了完整的BookContent对象，类型不匹配。

• 修正content的状态定义，明确指定类型并设置合理初始值：

// 假设BookContent是你的类型定义，初始值设为null或符合结构的空对象
const [content, setContent] = useState<BookContent | null>(null);

若BookContent字段均为可选，也可使用Partial<BookContent>，但更推荐直接匹配类型并设为null，后续通过非空判断再使用。

2. 解决运行时Cannot read properties of undefined错误 #

该错误是因为setContent是异步操作，调用后content不会立即更新，此时console.log(content)和dispatch(setBookContentThunk(content))中的content仍是初始的undefined，进而导致读取info时报错。

修正方案：

• 统一使用async/await写法，避免混用.then；
• 直接用接口返回的res数据执行dispatch，或监听content变化后再触发dispatch。

修改后的useEffect代码：

useEffect(() => {
  const getBookInfo = async () => {
    try {
      const res = await services.bookData.getBookContent(bookID);
      const newContent = {
        id: res.id,
        metadata: res.metadata,
        name: res.name,
        info: res.info,
        type: res.type,
      };
      setContent(newContent);
      // 直接使用newContent执行dispatch，避开异步更新的state
      dispatch(setBookContentThunk(newContent));
    } catch (err) {
      throw new Error(`Error in retrieving book details. ${err}`);
    }
  };

  getBookInfo();
}, [authState.status, bookID, dispatch]);

若必须依赖更新后的content执行dispatch，可新增一个useEffect监听content变化：

// 监听content变化，非空时执行dispatch
useEffect(() => {
  if (content) {
    dispatch(setBookContentThunk(content));
  }
}, [content, dispatch]);

useEffect(() => {
  const getBookInfo = async () => {
    try {
      const res = await services.bookData.getBookContent(bookID);
      setContent({
        id: res.id,
        metadata: res.metadata,
        name: res.name,
        info: res.info,
        type: res.type,
      });
    } catch (err) {
      throw new Error(`Error in retrieving book details. ${err}`);
    }
  };

  getBookInfo();
}, [authState.status, bookID]);

3. 额外注意点 #

• 将bookID和dispatch加入useEffect的依赖数组，避免闭包问题；
• 在组件中使用content时，先做非空判断（如content?.info），防止未加载完成时访问属性报错。

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