ReactJS：如何展示从接口获取的URL对应的TXT文件内容？

嘿，我明白你想把状态里的URL对应的TXT文件内容和其他数据一起展示的需求。之前用<object>标签的方式其实兼容性不太稳定，而且很难处理加载失败、加载中的状态，这里给你推荐更可靠的方案——直接通过Fetch获取TXT文本内容，存入状态后再渲染出来，这样可控性更强，用户体验也更好。

类组件实现方式 #

如果你的组件是类组件，可以这样做：

1. 在组件状态里新增txtContent（存储TXT内容）和error（存储错误信息）字段
2. 在componentDidMount或者componentDidUpdate里，当this.state.result.URL存在且变化时，发起Fetch请求获取文本
3. 用<pre>标签渲染内容（保留文本格式），同时处理加载中和错误状态

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: {}, // 你已有的包含URL的状态对象
      txtContent: '加载中...',
      error: ''
    };
  }

  componentDidMount() {
    this.fetchTxtContent();
  }

  componentDidUpdate(prevProps, prevState) {
    // 当URL变化时重新获取内容
    if (this.state.result.URL !== prevState.result.URL) {
      this.fetchTxtContent();
    }
  }

  fetchTxtContent = () => {
    const { URL } = this.state.result;
    if (!URL) return;

    this.setState({ txtContent: '加载中...', error: '' });
    fetch(URL)
      .then(response => {
        if (!response.ok) throw new Error('TXT文件加载失败');
        return response.text();
      })
      .then(text => this.setState({ txtContent: text }))
      .catch(err => this.setState({ txtContent: '加载失败', error: err.message }));
  };

  render() {
    return (
      <div>
        {/* 这里展示你的其他数据 */}
        <h3>TXT文件内容：</h3>
        {/* 用pre标签保留文本格式，设置样式模拟你之前object的尺寸 */}
        <pre style={{ 
          width: '910px', 
          height: '180px', 
          overflow: 'auto', 
          border: '1px solid #eee',
          padding: '10px'
        }}>
          {this.state.txtContent}
        </pre>
        {this.state.error && <p style={{ color: '#dc3545' }}>错误：{this.state.error}</p>}
      </div>
    );
  }
}

函数组件实现方式 #

如果是用Hook的函数组件，逻辑类似，用useEffect监听URL变化：

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

function YourComponent() {
  const [result, setResult] = useState({}); // 你已有的包含URL的状态对象
  const [txtContent, setTxtContent] = useState('加载中...');
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchTxtContent = async () => {
      const { URL } = result;
      if (!URL) return;

      setTxtContent('加载中...');
      setError('');
      try {
        const response = await fetch(URL);
        if (!response.ok) throw new Error('TXT文件加载失败');
        const text = await response.text();
        setTxtContent(text);
      } catch (err) {
        setTxtContent('加载失败');
        setError(err.message);
      }
    };

    fetchTxtContent();
  }, [result.URL]); // 仅当URL变化时执行

  return (
    <div>
      {/* 这里展示你的其他数据 */}
      <h3>TXT文件内容：</h3>
      <pre style={{ 
        width: '910px', 
        height: '180px', 
        overflow: 'auto', 
        border: '1px solid #eee',
        padding: '10px'
      }}>
        {txtContent}
      </pre>
      {error && <p style={{ color: '#dc3545' }}>错误：{error}</p>}
    </div>
  );
}

为什么不用<object>？ #

<object>标签加载文本文件的浏览器兼容性参差不齐，有些浏览器可能会直接下载文件而不是展示，而且很难捕获加载失败的异常，也没法添加友好的加载状态提示。用Fetch获取文本后渲染<pre>标签，不仅能完美保留文本的换行和格式，还能完全控制加载、成功、失败三种状态的展示，体验更流畅。

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