React状态在第二个索引更新后UI未同步问题求助

问题场景 #

我用React + TypeScript处理书籍作者的嵌套状态更新，核心代码如下：

interface BookState {
  name: string
  authors: AuthorState[]
}

interface AuthorState {
    name: string
}

const [bookValues, setBookValues] = useState<BookState[]>(bookStateInitial)

// 添加新的空作者，后续通过文本框填充内容
const onClickAddAuthor = (bookIndex: number) => {
    let newAuthor = {} as AuthorState
    let authors = [...bookValues[bookIndex].authors, newAuthor]
    let newBookState = update(bookValues, { [bookIndex]: { authors: { $set: authors } } })
    setBookValues(newBookState)
}

// 初始状态
bookValues = [
    {name: "Book-1", authors: [{name: "Author-1"}] },
    {name: "Book-2", authors: [{name: "Author-1"}, {name: "Author-2"}]}
]

调用onClickAddAuthor(0)给Book-1添加作者时，状态和UI都正常更新；但调用onClickAddAuthor(1)给Book-2添加作者时，控制台显示状态已更新，UI却完全没反应。试过用immutability-helper库，甚至深拷贝后更新状态，问题依然存在。

问题原因 #

1. 非法类型断言导致状态异常：用{} as AuthorState创建的空对象不符合AuthorState的类型定义——该接口要求必须有name字段，但空对象没有这个属性。这种不符合结构的对象可能让React的diff算法无法正确识别状态变化，或是在渲染时触发隐性错误导致UI不更新。
2. 闭包捕获旧状态的风险：直接使用bookValues当前值进行更新，可能因为闭包问题捕获到旧的状态快照，导致更新逻辑基于过时的数据执行。

修复方案 #

调整onClickAddAuthor函数，确保状态更新完全符合类型规范且遵循不可变原则：

const onClickAddAuthor = (bookIndex: number) => {
    // 创建符合AuthorState类型的合法空作者对象
    const newAuthor: AuthorState = { name: "" }
    // 使用函数式更新获取最新状态快照
    setBookValues(prevBookValues => 
        update(prevBookValues, {
            [bookIndex]: {
                authors: { $push: [newAuthor] } // 用$push直接添加元素，更简洁安全
            }
        })
    )
}

额外排查点 #

如果修复后UI还是不更新，检查以下内容：

• 渲染书籍列表时，每个Book项的key是否使用了唯一且稳定的标识（比如书籍的ID，不要用数组索引）
• 渲染作者列表的子组件是否正确接收了authors props，有没有因为引用未变化导致的跳过渲染（比如使用了React.memo但依赖项配置错误）

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