React组件全局变量使用问题：API数据渲染为空但控制台输出正常

嘿，这个问题我太熟了——本质就是异步请求的执行时机和React组件渲染周期没对上！

为啥会出现这种情况？ #

• 当你定义item_box这段JSX的时候，你的API请求还在后台跑着呢，output数组还是空的，这时候output[0]就是undefined，你试着访问undefined.brand其实已经在控制台悄悄报错了（说不定你没注意到），自然渲染出来就是空的。
• 而你写的console.log(output[0].brand)是在request.onload回调里执行的，这时候API请求已经完成，数据也推到output里了，所以能正常打印出品牌名。

正确的解决姿势：用React状态管理数据 #

在React里，我们得用**状态（state）**来管理异步获取的数据，只要状态更新，React就会自动重新渲染组件，把最新的数据展示出来。下面给你两种组件类型的解决方案：

方案1：函数组件（推荐用Hooks）

import { useState, useEffect } from 'react';

function YourComponent() {
  // 用useState定义状态，初始值设为null表示还没拿到数据
  const [product, setProduct] = useState(null);

  useEffect(() => {
    // 发起API请求
    const request = new XMLHttpRequest();
    request.open('GET', 'http://localhost:3005/products/157963', true);
    
    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        const data = JSON.parse(this.response);
        // 更新状态，触发组件重新渲染
        setProduct(data);
      } else {
        console.log('请求出错啦');
      }
    };

    request.send();

    // 组件卸载时取消请求，防止内存泄漏
    return () => request.abort();
  }, []); // 空数组表示这个副作用只在组件挂载时执行一次

  // 数据还没加载出来的时候，显示加载提示
  if (!product) {
    return <div>加载中...</div>;
  }

  return (
    <ItemPanel>
      <ItemBox>
        <BoxTitle>{product.brand}</BoxTitle>
      </ItemBox>
      <BoxImg src={require("./ucfnti1.jpg")} alt='图片加载失败'></BoxImg>
    </ItemPanel>
  );
}

方案2：类组件

如果你还在使用类组件的写法，也可以这样做：

import React, { Component } from 'react';

class YourComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      product: null
    };
  }

  componentDidMount() {
    const request = new XMLHttpRequest();
    request.open('GET', 'http://localhost:3005/products/157963', true);
    
    request.onload = () => {
      if (request.status >= 200 && request.status < 400) {
        const data = JSON.parse(request.response);
        // 更新状态，触发重新渲染
        this.setState({ product: data });
      } else {
        console.log('请求出错啦');
      }
    };

    request.send();
  }

  render() {
    const { product } = this.state;
    
    if (!product) {
      return <div>加载中...</div>;
    }

    return (
      <ItemPanel>
        <ItemBox>
          <BoxTitle>{product.brand}</BoxTitle>
        </ItemBox>
        <BoxImg src={require("./ucfnti1.jpg")} alt='图片加载失败'></BoxImg>
      </ItemPanel>
    );
  }
}

额外小建议： #

其实现在大家更常用fetch或者axios来替代XMLHttpRequest，语法更简洁，用Promise的方式处理异步也更顺手。比如用fetch改写的话：

useEffect(() => {
  fetch('http://localhost:3005/products/157963')
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(data => setProduct(data))
    .catch(err => console.log(err));
}, []);

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