Question

我正在使用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(/\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}

希望你明白了。

React.js - 从textfile获取字符串后数组无法正确显示

1 个答案: