React使用axios时遇useState读取错误及Promise渲染问题求助

API 探路者

2026-8-14

问题根源

你遇到的两个错误都是同一个核心问题导致的：你的Index组件被定义成了async函数。

Objects are not valid as a React child (found: [object Promise])：async函数的返回值是Promise对象，而React组件要求必须返回React元素（或null/undefined），不能返回Promise，所以React尝试渲染Promise时抛出这个错误。
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'useState')：当组件是async函数时，React无法在正确的上下文环境中执行hooks（比如useState），导致hooks调用失效，抛出该错误。

从报错信息里的at Index (App.js:6:1)可以推断，你的组件定义大概率是类似这样的错误写法：

async function Index() { // 这里的async是错误根源
  const [cars, setCars] = useState([]);
  // 你的fetchCars和useEffect代码
  return <div>...</div>;
}

解决方法

移除组件定义前的async关键字
React组件不能是async函数，把组件改成普通函数即可，数据请求的async逻辑放在组件内部的函数中（比如你写的fetchCars），然后在useEffect里调用，这种写法是完全正确的：

function Index() { // 去掉async
  const [cars, setCars] = useState([]);
  async function fetchCars() {
    const response = await axios
      .get("http://localhost:3001/")
      .catch((err) => console.log(err));
    if (response) {
      const cs = response.data;
      console.log(cs);
      setCars(cs);
    }
  }
  useEffect(() => {
    fetchCars();
  }, []);
  
  return <div>{/* 你的渲染逻辑 */}</div>;
}