本文详解如何在 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;✅ 关键改进说明：
-
使用
async/await替代.then()链：语义更清晰，错误处理更统一（配合try/catch）； -
直接基于
datastate 渲染：移除无意义的newData变量，避免状态不同步； -
健壮的文本解析逻辑：你提供的
questlist.txt实际是按换行分隔（非逗号），因此改用.split('\n')并结合.trim()和.filter()清理空白行与空格； - 添加加载与错误状态：提升用户体验与调试能力；
-
严格类型定义：
useState<string>([])</string>避免any类型带来的潜在 bug； -
确保文件路径正确：
.txt文件需置于public/Quests/questlist.txt，否则fetch将 404。
⚠️ 注意事项：
-
fetch是浏览器 API，仅在客户端运行；服务端渲染（SSR）场景需改用fs.readFile（Node.js 环境）或预构建时处理； - 若文本含特殊字符或编码（如 UTF-8 BOM），可在
response.text()后手动处理； - 生产环境建议对敏感文本做缓存控制（如
Cache-Control头），避免频繁请求。
遵循以上实践，即可稳定、可维护地将外部文本数据注入 React 组件并高效渲染。
