React通过axios获取接口数据赋值state后调用slice方法报错求助

错误原因 #

• UserService.getAll()是异步请求，返回值是Promise实例而非接口返回的数组。你直接将Promise存入state.data，非数组类型自然不存在slice方法，触发类型错误。
• setState为异步操作，执行后立刻读取this.state.data无法拿到最新更新的值。

修复方案 #

将setState操作移入Promise的then回调中，请求成功拿到真实数组后再更新状态：

getProducts = () => {
  UserService.getAll()
    .then(response => {
      // 拿到接口返回的数组后再更新state
      this.setState({ data: response.data }, () => {
        // setState第二个参数为回调，可拿到更新后的最新state
        console.log(this.state.data)
      })
    })
    .catch(error => {
      // 补充错误处理，避免请求失败导致页面异常
      console.error('获取商品列表失败:', error)
    })
}

额外说明 #

• 你初始已经设置state.data = []，请求未完成时使用空数组渲染不会触发报错，请求成功后state更新会自动触发重新渲染。
• 不需要在getProducts方法中返回数据，渲染逻辑直接读取this.state.data即可。

内容的提问来源于stack exchange，提问作者Thành Lê