Странная ошибка в React.js - Fetch API возвращает HTML из index.html, несмотря на то, что он не вызывается - PullRequest
Новая
       14

Странная ошибка в React.js - Fetch API возвращает HTML из index.html, несмотря на то, что он не вызывается

0 голосов
/ 18 мая 2018

Я работаю над небольшой программой в React.js.В настоящее время я имею дело со странной ошибкой в ​​моей программе.По сути, я использую API Fetch для извлечения текста из текстового файла, чтобы я мог выполнять над ним функции.Но всякий раз, когда я пытаюсь вызвать текстовый файл, я просто продолжаю получать массив, заполненный тегами html из моего файла index.html ... который вообще не вызывается.

Любые предложения относительно того, почему это такпроисходит, и как получить правильные результаты из sample.txt?

Вот мой код: sample.txt 

This is 
a sample
file.

App.js 

import React, { Component } from 'react';
import Sample from './components/Sample';

class App extends Component {
    getSample = async (e) => {
      e.preventDefault();
      fetch('sample.txt')
       .then((response) => response.text())
       .then(data => {
        let sampleArray = data.split(/\r?\n/)
        console.log(sampleArray)
      })
    }
  render() {
    return (
      <div>
      <Sample
        getSample={this.getSample}
        />
      </div>
    );
  }
}

export default App;

component /Sample.js (когда нажата кнопка, вызывается API) 

import React from 'react';

class Sample extends React.Component {
    render() {
        return (
            <form onSubmit={this.props.getSample}>
            <button> Submit </button>
            </form>
            )
    }
}

export default Sample;

Желаемые результаты 

sampleArray = ["This is", "a sample", "file"];

Фактические результаты (я просто возвращаю массив HTML вindex.js?) Results

1 Ответ

0 голосов
/ 18 мая 2018

смог воссоздать.Это будет работать для вас: 

import React, { Component } from 'react';
import myTextFile from './sample.txt'

class App extends Component {
  getSample = () => {
    fetch(myTextFile)
      .then((response) => response.text())
      .then(data => {
      console.log(data)
    })
  }
  render() {
    this.getSample()
    return (
      <div>App</div>
    );
  }
}

export default App;

Вот несколько важных разговоров.https://github.com/facebook/create-react-app/issues/2961

По сути, вам все равно придется импортировать файл и затем передать его в функцию выборки.

Надеется, что это поможет.

...