React中Axios GET请求返回undefined且报404的问题排查

首先可以确定，问题出在客户端代码——毕竟Postman能正常拿到响应，说明服务端的接口是没问题的，问题全在你的React代码里的Axios调用逻辑和异步处理上。咱们一步步拆解错误点和修复方案：

核心错误点 #

1. Axios GET方法的调用格式完全错了 #

axios.get的正确语法是axios.get(url[, config])，也就是第一个参数直接传URL字符串，第二个参数才是包含headers等配置的对象。你把URL放进了配置对象里，导致Axios实际发送的请求地址根本不是你想要的http://178.62.198.162/api/posts，这才会返回404错误。

2. 没处理异步请求的Promise #

axios.get返回的是一个Promise对象，你直接把它赋值给response，此时请求还没完成，自然拿不到实际的响应数据，所以response.data肯定是undefined。而且你也没等请求完成就直接调用setState，这完全不符合异步代码的处理逻辑。

3. Render方法里的遍历错误 #

你在render里写了this.items.map，但你已经从state里解构出了items变量，应该直接用items.map；另外console.log(this.items)也是错的，要打印状态里的内容应该用this.state.items，而且最好放在setState的回调里，确保状态已经更新。

修正后的完整代码 #

修正componentDidMount方法 #

componentDidMount() {
  // 正确的Axios GET调用格式：URL为第一个参数，配置为第二个参数
  axios.get('http://178.62.198.162/api/posts', {
    headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
  })
  .then(response => {
    // 请求成功后，更新状态：标记加载完成，存入数据
    this.setState({
      isLoaded: true,
      items: response.data
    }, () => {
      // setState是异步的，在回调里打印才能拿到最新状态
      console.log(this.state.items);
    });
  })
  .catch(error => {
    // 请求失败时，更新状态：标记加载完成，存入错误信息
    this.setState({
      isLoaded: true,
      error: error
    });
    console.error("请求出错：", error);
  });
}

修正render方法 #

render() {
  const { error, isLoaded, items } = this.state;
  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {/* 用解构后的items遍历，key建议用唯一的id（如果接口返回的话），没有的话再用name */}
        {items.map(item => (
          <li key={item.id || item.name}>
            {item.name}
          </li>
        ))}
      </ul>
    );
  }
}

总结解决步骤 #

1. 按照Axios官方要求的格式调用get方法，区分URL参数和配置参数；
2. 用.then()处理异步请求的成功回调，在回调内更新组件状态；
3. 用.catch()捕获请求异常，更新状态以展示错误信息；
4. 修正render方法中遍历数据的变量引用错误；
5. 如果需要打印状态，记得在setState的回调里操作，保证拿到的是最新状态。

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