React使用Axios请求API响应控制台可见但UI渲染报Objects are not valid as a React child错误

错误根因 #

你触发报错的核心原因是两次将值额外包装为对象，最终尝试把JS对象直接渲染到React UI上，React本身不支持将普通对象作为子元素直接渲染。

具体错误点&修正方案 #

1. 调用setResult时多余包装对象
   你现有代码中拿到接口响应后的处理是错误的：

// 错误写法
result = res.data
setResult({ result }) 

这里的setResult({ result })等价于setResult({ result: res.data })，你把接口返回的原始值额外套了一层对象，而且直接给state变量result赋值的写法是无效的，React state必须通过对应的set方法更新。

修正为：

// 正确写法，直接把接口返回值存入state，不要额外包装
setResult(res.data)

2. 渲染逻辑中多余添加大括号
   你现有渲染部分的写法是错误的：

// 错误写法
{loading ? <ReactBootStrap.Spinner animation='grow' /> : { result }}

三元表达式已经包裹在JSX的表达式大括号中，后半段的{ result }相当于创建了一个新的对象字面量{result: 你存储的值}，刚好触发了对象不能作为React子元素的报错。

修正为：

// 正确写法，直接返回result即可
{loading ? <ReactBootStrap.Spinner animation='grow' /> : result}

补充注意事项 #

如果你的接口返回的res.data本身就是一个对象（而非字符串/数字等可直接渲染的基础类型），你还需要取出对象中具体的字段值进行渲染，不能直接渲染整个对象，示例：

// 假设res.data结构为 {text: "生成的文本内容"}，需要取具体字段
{loading ? <ReactBootStrap.Spinner animation='grow' /> : result.text}

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