React使用fetch请求MongoDB接口可打印数据但无法渲染如何解决

核心问题 #

• 你没有将请求返回的数据存入组件状态，fetch回调内的data为局部变量，渲染逻辑无法访问
• render方法不能直接返回JS原始对象，必须返回合法的JSX结构

修正后完整代码 #

import React from 'react';

class Api extends React.Component {
  // 初始化组件状态
  state = {
    data: null,
    isLoading: true,
    error: null
  }

  componentDidMount() {
    const apiUrl = 'https://us-east-1.aws.webhooks.mongodb-realm.com/api/client/v2.0/app/cv-xfzvw/service/cv/incoming_webhook/api?secret=cv';
    fetch(apiUrl)
      .then((response) => {
        if (!response.ok) throw new Error('请求异常')
        return response.json()
      })
      .then((data) => {
        // 将数据存入状态，触发组件重新渲染
        this.setState({
          data: data,
          isLoading: false
        })
      })
      .catch(err => {
        this.setState({
          error: err.message,
          isLoading: false
        })
      })
  }
  render() {
    const { isLoading, error, data } = this.state
    // 加载态处理
    if (isLoading) return <div>数据加载中...</div>
    // 错误态处理
    if (error) return <div>请求出错：{error}</div>
    // 有数据后按业务需求渲染，可根据返回数据的结构调整渲染逻辑
    return (
      <div>
        <h3>接口返回数据：</h3>
        {/* 如果返回的是对象，直接取对应字段渲染即可，比如 {data.name} */}
        {/* 如果返回的是数组，遍历渲染示例：{data.map(item => <div key={item.id}>{item.content}</div>)} */}
        {/* 临时查看完整数据可以转成字符串输出 */}
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    )
  }
}
export default Api;

补充说明 #

你可以根据自己接口返回的数据结构，替换render里的渲染逻辑即可，不要直接渲染整个JS对象，React无法直接输出原始对象，要么转成JSON字符串看结构，要么取具体字段渲染。

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