React.js - 从文本文件中获取字符串后，数组无法正确显示

Posted 2021-04-19

我正在使用React.js中的程序，我无法正确显示数组。我尝试了各种“加入”语句，但似乎都没有。我尝试使用split（/ r？ n /）拆分行。我正在使用Fetch API来调用文本文件，然后将内容放入一个数组中，然后我想将其显示在屏幕上。如果有人可以指出为什么它可能不起作用，请指出它们！

这是我的代码：

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 = {
      cat_Array: []
    }
    getCats = (e) => {
      e.preventDefault();
        fetch(catFile).then(data => data.text()),
        .then(allResponses => {
          let catArray = allResponses.split(/
?
/);
this.setState({
                    cat_array: catArray
                  })
            }
          }
        })
      }
  render() {
    return (
      <div>
      <h2> Cats</h2>
      <Cats
        getCats={this.getCats}
        />

      </div>
    );
  }
}

组件/ Cat.js

import React from 'react';

class Cat extends React.Component {
    render() {
        return (
            <div>
               <p> {this.props.getCats} </p>
            </div>)
    }
}

export default Cat;

实际产出

PersianHimalayanSiameseSphynx

预期产出

Persian
Himalayan
Siamese
Sphynx