React中fetch读取文件后无法生成可映射数组问题求助

问题核心 #

你当前代码的主要问题在于异步逻辑处理错误和数据格式未清理，导致无法正确渲染轮播项：

• 用普通变量newData存储状态值，无法触发组件重渲染
• fetch是异步操作，newData = data执行时data还未更新
• 从txt文件split后的数组元素带有换行符和空格，需要清理
• 代码存在语法错误（your text干扰了Carousel属性）

修复步骤 #

1. 移除冗余的newData变量，直接使用状态data进行渲染
2. 清理split后的数组元素：对每个元素执行trim()去除换行、空格
3. 修正语法错误：删除Carousel属性中的 your text 无效代码
4. 优化状态初始值：将useState初始值设为空数组[]，避免map时出现空值报错
5. 正确处理异步日志：通过useEffect监听data变化再打印，而非在getText中直接打印

修正后的完整代码 #

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

const PATH = "/Quests/questlist.txt";

function App() {
  const [data, setData] = useState<string[]>([]);

  useEffect(() => {
    getText();
  }, []);

  // 监听data变化，调试用
  useEffect(() => {
    console.log(data);
  }, [data]);

  async function getText() {
    fetch(PATH)
      .then((response) => response.text())
      .then((text) => {
        // 分割后清理每个元素的换行和空格
        const cleanedData = text.split(",").map(item => item.trim());
        // 过滤掉可能存在的空字符串
        setData(cleanedData.filter(item => item));
      });
  }

  return (
    <div>
      <Carousel
        className="App"
        maw={320}
        mx="auto"
        withIndicators
        height={200}
      >
        {data.map((sm, index) => (
          <Carousel.Slide key={index}>{sm}</Carousel.Slide>
        ))}
      </Carousel>
    </div>
  );
}

export default App;

额外说明 #

• questlist.txt中的每个条目结尾的逗号可以保留，split后会被正确分割，再通过trim()清理换行
• 给Carousel.Slide加上key属性，符合React列表渲染的要求，避免警告

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