如何在 React 中正确读取文本文件并转换为可映射的数组-js教程-PHP中文网

如何在 React 中正确读取文本文件并转换为可映射的数组

本文详解如何在 React 中通过 fetch 读取本地文本文件（如 .txt），安全解析为字符串数组，并在组件中正确渲染（例如用于 Mantine Carousel），重点解决异步状态更新和数据同步常见陷阱。

本文详解如何在 react 中通过 fetch 读取本地文本文件（如 .txt），安全解析为字符串数组，并在组件中正确渲染（例如用于 mantine carousel），重点解决异步状态更新和数据同步常见陷阱。

在 React 应用中动态加载外部文本文件（如配置项、文案列表等）是一个常见需求，但初学者常因忽略异步执行机制与 React 状态更新的异步特性而陷入“数据为空”或“无法 map”的困境。你提供的代码中存在两个关键问题：一是误将 fetch 的链式 .then() 视为同步执行，导致 newData = data 在状态尚未更新时就被赋值；二是重复声明冗余变量 newData，违背 React 的响应式原则——所有 UI 渲染应直接基于 state，而非中间变量。

以下是修复后的完整、可运行的解决方案：

import React, { useState, useEffect } from "react";
import { Carousel } from "@mantine/carousel";

const PATH = "/Quests/questlist.txt"; // 确保该路径在 public 目录下可访问

function App() {
  const [data, setData] = useState<string>([]); // 明确类型：字符串数组
  const [loading, setLoading] = useState(true);   // 可选：添加加载状态提升体验
  const [error, setError] = useState<string null>(null);

  useEffect(() => {
    const getText = async () => {
      try {
        const response = await fetch(PATH);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const text = await response.text();
        // 按换行符分割（适配你提供的多行格式），并去除首尾空格、过滤空字符串
        const quests = text
          .split('\n')
          .map(line => line.trim())
          .filter(line => line.length > 0);
        setData(quests);
      } catch (err) {
        console.error("Failed to load quest list:", err);
        setError(err instanceof Error ? err.message : "Unknown error");
      } finally {
        setLoading(false);
      }
    };

    getText();
  }, []);

  // 渲染前检查状态
  if (loading) return <div>Loading quests...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <carousel classname="App" maw="{320}" mx="auto" withindicators height="{200}">
        {data.map((quest, index) => (
          <carousel.slide key="{index}">{quest}</carousel.slide>
        ))}
      </carousel>
</div>
  );
}

export default App;</string></string>

✅ 关键改进说明：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

使用 async/await 替代 .then() 链：语义更清晰，错误处理更统一（配合 try/catch）；
直接基于 data state 渲染：移除无意义的 newData 变量，避免状态不同步；
健壮的文本解析逻辑：你提供的 questlist.txt 实际是按换行分隔（非逗号），因此改用 .split('\n') 并结合 .trim() 和 .filter() 清理空白行与空格；
添加加载与错误状态：提升用户体验与调试能力；
严格类型定义：useState<string>([])</string> 避免 any 类型带来的潜在 bug；
确保文件路径正确：.txt 文件需置于 public/Quests/questlist.txt，否则 fetch 将 404。