React.js - массив не отображается правильно после получения строк из текстового файла

Question

Я работаю над программой в React.js, и у меня возникают проблемы с отображением массивов для корректного отображения.Я пробовал разные «соединения», но ни одно из них не помогло.Я попытался разделить строки с помощью split (/ \ r? \ N /).Я использую API Fetch для вызова текстового файла, а затем помещаю содержимое в массив, который затем хочу отобразить на экране.Если кто-нибудь может дать какие-либо указания относительно того, почему он может не работать, укажите их!

Вот мой код:

cats.txt

Persian
Himalayan
Siamese
Sphynx

Приложение.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(/\r?\n/);
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

Answer 1

Я добавил несколько строк кода и получил желаемый результат.Измените следующее -

Замените тело fetch на это -

  fetch(catFile)
    .then(data => data.text())
    .then(allResponses => {
      let catArray = allResponses.split('\n');
      this.setState({
           cat_Array: catArray
       });
   });

Добавьте этот код в методе render() -

const catData = this.state.cat_Array.map((data) => {
      return (
        <span>{data} <br/></span>
      )
    });

Теперь передайтеcastData как реквизит в компоненте Cat вместо вызова this.props.getCats.Так что теперь вы можете напрямую показывать такие данные - {catData}

Надеюсь, у вас есть идея.