React新手求助：componentDidMount中SetState报错，无法接收数字及Promise问题

嗨，作为React新手碰到这个问题很正常，我来帮你拆解一下根源和解决办法～

首先，咱们先明确错误的核心：你看到的Uncaught Error: Objects are not valid as a React child (found: [object Promise])，本质是你的组件尝试渲染一个Promise对象，而不是接口返回的数字数据。这说明你大概率是把整个Promise直接存进了state，而非等待它解析完成后再把最终结果赋值给state。

你的代码逻辑问题出在哪？ #

你提到用了.then(res => res.json().then(data => data))，但这个表达式本身返回的还是一个Promise——因为res.json()是异步操作，嵌套的then虽然能拿到最终的data，但如果你的写法是类似这样：

// 错误示例！
componentDidMount() {
  this.setState({
    num: fetch('/api/xxx').then(res => res.json().then(data => data))
  });
}

那this.state.num存储的就是一个Promise对象，而不是你想要的数字。当组件渲染时，React会尝试把这个Promise当成子元素渲染，自然就抛出错误了。

正确的写法应该是这样 #

你需要在Promise的回调函数内部调用setState，确保只有当数据解析完成后，才把最终结果存入state：

链式then写法

componentDidMount() {
  fetch('你的接口地址')
    // 先解析响应为JSON
    .then(res => res.json())
    // 拿到解析后的数据，再调用setState
    .then(data => {
      // 先确认data的类型，避免接口返回非数字
      console.log('接口返回数据:', data, '类型:', typeof data);
      // 如果是字符串数字，可以转成Number：const num = Number(data);
      this.setState({ count: data });
    })
    // 别忘了捕获请求错误
    .catch(err => console.error('请求失败:', err));
}

更清晰的async/await写法

componentDidMount支持async函数（React不会介意它返回Promise），用async/await能让代码更易读：

async componentDidMount() {
  try {
    const res = await fetch('你的接口地址');
    const data = await res.json();
    // 确保数据是数字类型
    const num = typeof data === 'number' ? data : Number(data);
    this.setState({ count: num });
  } catch (err) {
    console.error('请求出错啦:', err);
  }
}

额外小提示 #

• 一定要确认接口返回的data确实是数字（或者可以转成数字），有时候接口可能返回字符串形式的数字（比如"100"），虽然React渲染字符串没问题，但如果后续有数字运算逻辑，最好提前转换类型。
• 永远不要把Promise直接赋值给state，必须等待它resolve后，把结果存入state。

内容的提问来源于stack exchange，提问作者Συλχαν