Question

我正在研究ReactJS中的一个小程序。此程序调用文本文件，检查其标准，并将结果记录到数组中。单击按钮时，该阵列应显示在页面上。出于某种原因，只显示数组的最后一个元素 - 我需要显示整个内容。关于如何让它发挥作用的任何想法？

我的想法是，我需要获得包含“花”的所有植物的数组并将它们记录到屏幕上。

plants.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中，但只有“向日葵”被打印到屏幕上。任何想法为什么会这样，以及如何让多个元素打印到屏幕上？

Answer 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>

还要记住将初始状态设置为[]而不是未定义，因为fetch是异步的。

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

1 个答案: