React中setState更新嵌套JSON数组对象不生效的解决方法

问题根因 #

setState本身语法没有错误，状态无法更新、页面不渲染的核心原因有2个：

• 接口请求放错生命周期位置：将数据请求写在componentDidUpdate中会触发无限循环。该生命周期在组件每次更新完成后触发，请求完成后调用setState更新状态会触发组件重渲染，重渲染完成后又会再次触发componentDidUpdate发起新请求，React会拦截这种死循环的异常更新，导致状态表现异常。首次加载的数据请求必须放在componentDidMount中，该钩子仅在组件首次挂载完成后触发1次。
• 列表key值非法：渲染列表时将整个对象bookInstance作为key值，React仅支持字符串/数字类型作为唯一key，对象类型key会导致列表diff更新异常。

其他需要修正的细节 #

• 初始状态中bookInstances是空数组，属于真值，不需要额外写if判断做空校验，空数组调用map不会抛出错误
• 类内部的渲染辅助函数不需要手动绑定this上下文，仅事件处理函数需要绑定
• 建议给接口请求加catch捕获，方便排查请求层面的异常

修复后完整代码 #

export default class BookInstances extends Component {
  constructor(props) {
    super(props)
    this.state = {
      bookInstances: []
    }
  }

  componentDidMount() {
    axios.get('http://localhost:3001/catalog/bookinstances')
      .then(res => {
        this.setState({ bookInstances: res.data });
      })
      .catch(err => console.error('获取书籍实例列表失败:', err))
  }

  renderBookInstance(bookInstance) {
    return <li key={bookInstance.id}>{bookInstance.id}</li>
  }

  renderBookInstances() {
    return this.state.bookInstances.map(bookInstance => this.renderBookInstance(bookInstance))
  }

  render() {
    return (
      <div>
        <h1>Book Instance List</h1>
        <ul>{this.renderBookInstances()}</ul>
      </div>
    )
  }
}

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