React中JSX内select触发setState状态更新后页面未渲染问题咨询

问题排查及解决方法 #

• 核心问题：你使用了非受控组件属性defaultValue
defaultValue仅会在组件首次挂载渲染时生效，后续状态更新不会同步到select组件的选中值。如果需要状态控制select的选中项，需要将defaultValue={book.shelf}替换为value属性，绑定你需要的状态值：

<select value={this.state.value} onChange={(e) => this.handleChange(e, book)}>

• 第二处错误：handleChange中then的回调写法错误
  你当前的写法是直接在then中同步执行this.setState，并不会等待API请求完成后再执行，正确的写法需要给then传入一个回调函数：

handleChange = (e, book) => {
  BooksAPI.update(book, e.target.value).then(() => {
    this.setState(
      { value: e.target.value, book: book },
      () => console.log(this.state.value)
    )
  })
}

• 第三处需确认点：渲染用的book数据源是否匹配
  你select绑定的初始值是book.shelf，需要确认这个book是来自你修改的this.state.book，还是父组件传入的props：
  • 如果是props传入的book，你修改state里的book并不会触发props更新，自然渲染的值不会变化
  • 如果是遍历this.state.books数组得到的book，你仅修改了state.book单个对象，没有更新state.books数组里对应的项，也会导致渲染用的book.shelf没有变化，页面不会更新
• 第四处需确认点：列表渲染是否加了唯一key
  如果当前select是遍历数组渲染的多个项，没有给每个select设置唯一的key属性，React的diff算法可能无法识别需要更新的对应节点，导致视图不更新。

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