ReactJS中无法渲染字符串问题：异步请求数据无法在页面显示

嗨，我来帮你排查下为什么cities渲染不出来的问题，以及怎么解决它：

问题根源 #

你的代码里有两个核心问题导致cities无法正常渲染：

• React不追踪普通变量的变化：你定义的cities是一个普通变量，当你在HTTP请求的回调里更新它时，React完全感知不到这个变量的变化，自然不会触发组件重新渲染来展示新值。而printing是初始就存在的字符串，所以首次渲染能正常显示，但cities是在组件渲染完成后才被赋值的，这时候没有重绘触发，页面就不会更新。
• 异步请求的时机问题：HTTP请求是异步操作，组件首次渲染时cities还处于未赋值的状态，之后请求完成更新了cities，但因为它不是React状态变量，组件不会重新渲染来读取新值。

解决方案：用React状态管理+副作用钩子 #

在React函数组件里，我们需要用useState来管理需要渲染的动态数据，用useEffect来处理异步请求这类副作用操作。下面是修改后的完整代码示例：

import { useState, useEffect } from 'react';
import https from 'https';

function App() {
  const [printing] = useState("All users data:");
  const [cities, setCities] = useState(""); // 用状态变量存储城市字符串

  useEffect(() => {
    let citiesStr = "";
    https.get('https://jsonplaceholder.typicode.com/users', (resp) => { 
      let data = ''; 
      resp.on('data', (chunk) => { 
        data += chunk; 
      }); 
      resp.on('end', () => { 
        const users = JSON.parse(data); // 只解析一次，避免重复操作浪费性能
        users.forEach(user => {
          citiesStr += `${user.address.city}\n`;
        });
        setCities(citiesStr); // 更新状态，触发组件重新渲染
      }); 
      // 别忘了处理请求失败的情况
      resp.on('error', (err) => {
        console.error('请求出错:', err);
        setCities('加载城市数据失败');
      });
    });
  }, []); // 空依赖数组，确保只在组件挂载时发起一次请求

  return (
    <div className="App">
      <header className="App-header">
        <p>{printing}</p>
        <pre>{cities}</pre> {/* 用pre标签保留换行符，让城市列表排版更清晰 */}
      </header>
    </div>
  );
}

export default App;

关键修改点说明 #

1. 用useState定义状态变量：通过setCities更新状态时，React会自动触发组件重新渲染，这样新的cities值就能同步显示在页面上。
2. 用useEffect包裹异步请求：空的依赖数组[]确保请求只在组件首次挂载时执行一次，避免重复发起请求。
3. 优化JSON解析操作：把JSON.parse(data)的结果存到变量里，避免循环中重复解析JSON，提升性能。
4. 使用<pre>标签：默认的<p>标签会忽略换行符，用<pre>可以保留\n带来的换行效果，让城市列表的排版更直观。
5. 添加错误处理：处理请求失败的场景，给用户给出友好的提示信息。

另外，更符合React最佳实践的做法是用数组存储城市列表，渲染时用map遍历生成元素，示例如下：

// 初始化状态为数组
const [cities, setCities] = useState([]);

// 在请求完成的回调里：
const userCities = users.map(user => user.address.city);
setCities(userCities);

// 渲染时：
{cities.length > 0 ? (
  <ul>
    {cities.map((city, index) => (
      <li key={index}>{city}</li>
    ))}
  </ul>
) : (
  <p>加载中...</p>
)}

这种方式比拼接字符串更灵活，也更便于后续对城市数据进行其他操作。

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