React调用Spring Boot StreamingResponseBody接口无数据显示问题排查

下面列出你的代码中存在的错误及修正方案：

1. 流式数据接收方式错误 #

你使用await response.text()会等待整个流式响应完成后才返回完整字符串，既没有利用流式传输的实时性优势，也导致后续无法逐段处理数据。正确做法是用浏览器原生ReadableStream实时读取流式数据：

修正后的客户端请求代码：

async componentDidMount() {
  const response = await fetch('/3Dpoints');
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let receivedPoints = [];

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    // 解码二进制数据为文本，按换行分割成单个点
    const chunk = decoder.decode(value);
    const newPoints = chunk.split('\n').filter(p => p.trim() !== '');
    receivedPoints = [...receivedPoints, ...newPoints];
    // 实时更新状态
    this.setState({ points: receivedPoints });
  }
}

2. 状态赋值与遍历逻辑错误 #

• 原代码把整个响应字符串直接赋值给points数组（this.setState({points: body})），导致points实际是字符串而非数组，调用map时会遍历字符串的每个字符，而非每个点数据。
• 遍历points时尝试访问point.body，但每个点只是普通字符串，不存在body属性。

修正后的render部分：

render() {
  const { points } = this.state;
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div className="App-intro">
          <h2>Points</h2>
          {points.map((point, index) => (
            <div key={index}>
              {point}
            </div>
          ))}
        </div>
      </header>
    </div>
  );
}

3. 服务端流式输出优化（可选） #

Spring Boot的StreamingResponseBody默认处理分块传输，但可以添加out.flush()确保数据实时推送到客户端，避免缓冲区堆积：

public void streamPointCloud(java.io.OutputStream out) throws Exception{
    String path= ....;
    File file = new File(path);
    PointReader reader = new PointReader (file);
    for (Point p : reader.getPoints()) {
        MyPoint mp = new MyPoint(p.getX(), p.getY(), p.getZ());
        out.write((mp.toString()+"\n").getBytes());
        out.flush(); // 实时推送数据
    }
}

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