React.js从文本文件读取字符串后数组无法正确显示求助

我来帮你梳理下导致猫品种无法正确显示的几个关键问题，以及对应的修复方法：

1. 语法与状态匹配错误 #

先看App.js里的几个明显问题：

• import语句错误：import "Cat" from "./components/Cat.js"; 应该改成import Cat from "./components/Cat.js";（引号位置错误，组件名不需要引号包裹），同时你在render里用的<Cats>和组件导出的Cat名称不统一，建议改成<Cat />保持一致。
• Promise链语法错误：fetch(catFile).then(data => data.text()), .then( 这里多了个逗号，会导致Promise链断裂，应该去掉逗号改成.then(data => data.text()).then(。
• 状态键名不一致：初始state定义的是cat_Array（大写A），但setState时用的是cat_array（小写a），这会导致状态无法正确更新，建议统一成catArray。

2. 组件数据传递逻辑错误 #

你的Cat组件现在直接渲染{this.props.getCats}，这其实是把getCats函数当成文本渲染了，而不是我们获取到的猫品种数组。正确的做法是在App组件里把状态中的猫数组传递给Cat组件，而非传递函数。

3. 数组处理与显示问题 #

你的cats.txt是一行用空格分隔的品种，用split(/\r?\n/)分割后得到的是只有一个元素的数组（因为没有换行）。如果希望用空格分隔显示，要么直接使用原文本（去掉split），要么如果你的cats.txt实际是每行一个品种，split后用join(' ')拼接成空格分隔的字符串。

修正后的完整代码 #

cats.txt（如果是每行一个品种的格式，建议改成这样，保持原格式也可以）

Persian
Himalayan
Siamese
Sphynx

App.js

import React, { Component } from 'react';
import Cat from "./components/Cat.js";
import catFile from "./cats.txt";

class App extends Component {
  state = { 
    catArray: []
  }

  getCats = (e) => {
    e.preventDefault();
    fetch(catFile)
      .then(data => data.text())
      .then(allResponses => {
        // 处理每行一个品种的情况，过滤空行避免多余空格
        let catArray = allResponses.split(/\r?\n/).filter(item => item.trim() !== '');
        // 如果是一行空格分隔的情况，用下面的代码：
        // let catArray = allResponses.trim().split(' ');
        this.setState({ catArray });
      })
      .catch(err => console.error('加载猫品种失败:', err));
  }

  render() {
    return (
      <div>
        <h2>Cats</h2>
        {/* 加个触发按钮，否则getCats不会自动执行 */}
        <button onClick={this.getCats}>加载猫品种</button>
        {/* 把猫数组传递给Cat组件 */}
        <Cat catList={this.state.catArray} />
      </div>
    );
  }
}

export default App;

components/Cat.js

import React from 'react';

class Cat extends React.Component {
  render() {
    // 将数组用空格拼接成字符串，或者用map渲染每个品种
    const catText = this.props.catList.join(' ');
    return (
      <div>
        <p>{catText}</p>
        {/* 也可以用列表单独展示每个品种：
        <ul>
          {this.props.catList.map((cat, index) => (
            <li key={index}>{cat}</li>
          ))}
        </ul>
        */}
      </div>
    )
  }
}

export default Cat;

问题根源总结 #

之前出现“PersianHimalayanSiameseSphynx”的情况，核心是：

• 状态键名不一致导致数据没有正确存入状态
• 组件没有接收到正确的数组数据，反而渲染了函数
• 数组处理逻辑不符合你的文本文件格式，导致无法正确拆分或拼接

按照修正后的代码，点击按钮后就能正确显示成“Persian Himalayan Siamese Sphynx”了。

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