React类组件中如何正确渲染API返回的JSON数据？

你遇到的问题其实是React类组件中异步请求时机不对和状态管理缺失导致的，我来一步步帮你理清问题并解决：

问题根源分析 #

你的代码里有几个关键错误：

1. 在render函数里发起异步请求：render是纯函数，它的职责是根据state和props返回JSX，每次组件更新都会调用render。在这里发请求不仅会导致重复请求，更重要的是异步请求的回调会在render执行完成后才触发，此时render已经返回了JSX，根本拿不到回调里的变量。
2. 局部变量无法被render访问：你在request回调里定义的cardName和cardCount是回调函数的局部变量，render函数作用域里根本找不到这些变量，所以显示undefined。
3. 没有利用React的state管理数据：React组件需要通过state来存储动态数据，当state更新时会自动触发组件重新渲染，这样才能把新数据展示出来。

正确的解决方案 #

我们需要把异步请求移到合适的生命周期方法里，用state存储数据，再在render里从state读取数据渲染。具体步骤如下：

1. 初始化组件state #

在构造函数里初始化state，设置数据的初始值，同时可以加入加载状态和错误状态来提升用户体验。

2. 在componentDidMount里发起请求 #

componentDidMount是组件挂载完成后执行的生命周期方法，非常适合发起异步请求，确保组件已经准备好接收数据。

3. 请求成功后更新state #

拿到API返回的数据后，用this.setState()更新state，这会触发组件重新渲染，此时render就能拿到最新的数据。

完整改写后的代码 #

import React, { Component } from 'react';
const request = require("request");

class Test extends Component {
  constructor(props) {
    super(props);
    // 初始化state，设置初始值
    this.state = {
      cardName: '',
      cardCount: '',
      isLoading: true,
      error: null
    };
  }

  componentDidMount() {
    // 构造请求URL
    const urlCardName = encodeURIComponent(this.props.card.card_name);
    const url = "./query.php?cardName=" + urlCardName;
    
    // 发起异步请求
    request({ url: url, json: true }, (error, response, body) => {
      // 处理请求错误
      if (error) {
        this.setState({
          error: error.message,
          isLoading: false
        });
        return;
      }

      // 处理成功响应
      if (response.statusCode === 200) {
        this.setState({
          cardName: body.cardName.toString(),
          cardCount: body.cardCount.toString(),
          isLoading: false
        });
        console.log(body.cardCount);
      } else {
        // 处理非200状态码的情况
        this.setState({
          error: `请求失败，状态码：${response.statusCode}`,
          isLoading: false
        });
      }
    });
  }

  render() {
    // 解构state里的变量
    const { cardName, cardCount, isLoading, error } = this.state;

    // 加载状态显示
    if (isLoading) {
      return <div>加载中...</div>;
    }

    // 错误状态显示
    if (error) {
      return <div>出错了：{error}</div>;
    }

    // 正常渲染数据
    return (
      <div>
        Card Count: {cardCount}
        <br />
        Card Name: {cardName}
      </div>
    );
  }
}

export default Test;

额外提示 #

• 如果你的项目是浏览器环境，request库其实更适合Node.js端，推荐你使用fetch API或者axios来发起请求，它们更适合浏览器场景，用法也类似。
• 记得处理组件卸载时的请求取消，避免内存泄漏（比如用axios的CancelToken），不过这是进阶内容，先确保当前功能正常后再考虑。

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