ReactJS：API调用中的数组仅显示最后一个元素？答案

【问题标题】：ReactJS: array in API call only displaying last element?ReactJS：API调用中的数组仅显示最后一个元素？
【发布时间】：2018-10-30 10:41:26
【问题描述】：

我正在用 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 时，我可以清楚地看到“sunflower”和“elderflower”都被保存到flowerArray 中，但只有“sunflower”被打印到屏幕上。任何想法为什么会发生这种情况，以及如何将多个元素打印到屏幕上？

【问题讨论】：

标签： javascript arrays reactjs text fetch-api

【解决方案1】：

首先，你只需要设置一次状态，而不是每次都在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>

还记得将初始状态设置为[] 而不是 undefined 因为fetch 是异步的。

【讨论】：

我宁愿用filter来找花词。