如何将API数据存储到React State？代码无报错但未成功存储

核心问题：setState是异步操作 #

你看到console.log(this.state.dataDetail)输出空对象，不是数据没存进state，而是React的setState是异步执行的——调用setState后，React不会立刻更新state，而是把更新操作放进队列，等合适时机批量处理。所以你在setState之后立刻打印state，拿到的还是更新前的旧值，但实际上res.data已经被正确存入state了。

验证数据是否真的存入state #

可以通过两种方式确认：

• 用setState的回调函数：setState支持第二个参数，这是一个回调函数，会在state更新完成、组件重新渲染后执行，在这里打印就能拿到最新的state：

  this.setState({
      dataDetail: res.data,
  }, () => {
      console.log(this.state.dataDetail); // 这里能看到更新后的完整数据
  })
  

• 在render里打印：组件state更新后会自动触发render，在render方法里打印this.state.dataDetail，就能看到最新值：

  render() {
      console.log(this.state.dataDetail);
      return (
          // 你的组件内容
      )
  }
  

额外需要检查的点 #

• 确认getDetail方法是否被调用：类组件里通常在componentDidMount钩子中调用数据请求方法，比如：

  componentDidMount() {
      this.getDetail();
  }
  

• 确认this.props.nameParam.name是否为有效值：可以先打印这个参数，检查是不是正确的宝可梦名称，比如：

  getDetail = ()=>{
      console.log('当前请求的宝可梦名称：', this.props.nameParam.name);
      axios.get(`https://pokeapi.co/api/v2/pokemon/${this.props.nameParam.name}`)
      // ... 后续代码
  }
  

内容的提问来源于stack exchange，提问作者Mu'adhim