React使用自定义类对象时state重置问题求助

问题场景 #

我是React新手，按如下结构拆分图书页面：

• Book类：包含title和content字符串属性，负责后端API交互
• useBook钩子：管理图书状态
• BookComponent：负责视图渲染

初始代码 #

useBook钩子实现：

export const useBook = () => {
  const [book, setBook] = React.useState<Book>(new Book('', ''))
 
  function load(id: string) {
    Book.fetch(id).then((book) => { setBook(book) })
  }
  
  function title() : string {
     return book.title
  }

  function content() : string {
     return book.content 
  }

  function setTitle(title: string) {
    setBook({ ...book, title })
  }

  function setContent(content: string) {
    setBook({ ...book, content })
  }

  return {
    title,
    setTitle,
    content,
    setContent
  }
}

BookComponent核心代码：

<div>{book.title()}</div>
<input type="text" value={book.content()} onChange={(e) => book.setContent(e.target.value) }} />

出现的问题 #

页面能正常加载并显示图书标题和内容，但在文本框输入时，标题会变回初始值""。调试发现调用setContent时，闭包中的book是初始的空对象，而非加载后的图书对象。

将state初始值改为null后问题解决：

const [book, setBook] = React.useState<Book | null>(null)
// ...
function title() : string {
 if (!book) return ''
 
 return book.title
}
// content同理

但我不理解为什么会出现这种情况，以及背后的React生命周期逻辑。

原因分析 #

核心问题是React闭包陷阱：

• 自定义钩子useBook会在组件每次渲染时重新执行，钩子内部定义的setContent、title等函数会捕获当前渲染周期的book变量。
• 初始代码中，首次渲染时book是new Book('', '')，调用load后异步获取数据并setBook，触发组件重新渲染，此时新的book是后端返回的对象，钩子重新执行生成新的setContent，这个新函数捕获的是最新的book。
• 但如果组件因其他原因（比如父组件更新、其他状态变化）提前重新渲染，此时load还未完成，book仍为初始空对象，这时生成的setContent会捕获这个初始book。当后续输入调用该函数时，就会基于初始对象更新，导致标题丢失。

解决方案 #

方案1：使用函数式更新（推荐） #

修改setTitle和setContent，改用函数式更新获取最新state，彻底避免闭包陷阱：

function setTitle(title: string) {
  setBook(prevBook => ({ ...prevBook, title }))
}

function setContent(content: string) {
  setBook(prevBook => ({ ...prevBook, content }))
}

函数式更新的参数会接收当前最新的state，无需依赖闭包中的变量，确保每次更新都基于最新状态。

方案2：将初始值设为null #

你使用的null初始值方案能解决问题的原因是：

• 首次渲染时book为null，load完成后setBook将其更新为后端返回的对象，触发重新渲染。
• 后续渲染中，只要book不为null，钩子重新执行时生成的函数都会捕获最新的book对象；即使组件提前重新渲染，book为null时，title和content函数会返回空字符串，而load完成后生成的新函数会捕获正确的book，不会出现基于初始对象更新的情况。

原理说明 #

• React组件首次挂载时，useState会使用你传入的初始值；后续每次渲染，useState会忽略初始值，直接返回当前的state。你之前误以为state每次从初始值开始，是混淆了初始值的作用范围。
• 闭包陷阱的本质是：组件多次渲染时，钩子内部的函数会捕获对应渲染周期的state变量，而非始终指向最新state。函数式更新是React官方推荐的解决这类问题的方案。

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