ReactJS: массив в вызове API, отображающий только последний элемент? - PullRequest
Новая
       12

ReactJS: массив в вызове API, отображающий только последний элемент?

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

Я работаю над небольшой программой в ReactJS.Эта программа вызывает текстовый файл, проверяет его на соответствие критериям и записывает результаты в массив.Массив должен отображаться на странице при нажатии кнопки.По какой-то причине отображается только последний элемент массива - мне нужно отобразить все это.Любые идеи о том, как я могу заставить это работать?

Идея в том, что мне нужно получить массив всех растений, которые содержат в себе «цветок», и записать их на экран.

заводы.txt 

sunflower
rose
elderflower
hibiscus

App.js 

import React, { Component } from 'react';
import plantsFile from 'plants.txt';

class App extends Component {
  state = {
      flower_array: undefined
    }
    getFlowers = (e) => {
      e.preventDefault();
        fetch(inputFile).then(data => data.text());
          let plantArray = data.split(/\r?\n/);
          let flowerArray = [];
          for (let i = 0; i < plantArray.length; i++) {
              if(plantArray.includes("flower") {
                  flowerArray.push(plantArray[i])
                  this.setState({
                    flower_array = flowerArray
                  })
            }
          }
        })
      }
render() {
    return (
      <div>
<Flower 
getFlowers = {this.getFlowers} />
    );
  }
}

export default App;

/ components / Flower.js 

import React from 'react';

class Flower extends React.Component {
    render() {
        return (
            <div>
             <p> Flowers: {this.props.getFlowers} </p>
            </div>
            )
    }
}

export default Flower;

Фактический объем производства: 

Flowers: sunflower

Ожидаемый результат: 

Flowers: sunflower, elderflower

Когда я делаю console.log, я ясно вижу, что и «подсолнух», и «бузина» сохраняются в flowerArray, но только «подсолнух» печатается вэкран.Любые идеи, почему это происходит, и как я могу получить несколько элементов для печати на экран?

1 Ответ

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

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

for (let i = 0; i < plantArray.length; i++) {
  if(plantArray.includes("flower") {
    flowerArray.push(plantArray[i])
  }
}
this.setState({
   flower_array
});

В цветах вы должны использовать это состояние для передачи реквизита. 

<Flower getFlowers = {this.state.flower_array} />);

Внутри цветочного компонента: 

<p> Flowers: {this.props.getFlowers.join(',')} </p>

Также не забудьте установить начальное состояние на [] вместо неопределенного, поскольку fetch является асинхронным.

...