Javascript 在React中显示多个API响应

我正在学习React，我有一个通过API请求信息的解决方案，当有响应时，它会设置状态，但是当呈现结果时，它只会在屏幕上显示最后一个响应

尽管有4个，请参见下图。

App.js

import React from 'react';

import Tiles from './components/Tiles'
import Form from './components/Form'
import WaterData from './components/WaterData'

class App extends React.Component{

  state = {
    station_name: undefined,
    water_value: undefined,
    dateTime: undefined
  }

  getData = async (e) => {

    e.preventDefault();

    const name = e.target.elements.name.value;

    const api_call = await fetch(`https://waterlevel.ie/geojson/latest/`)
    .then(response1 => {
      response1.json().then(data =>{
        Array.from(data.features).forEach(element => {
          if(element.properties['station.name'] === name){
            this.setState({
              station_name: element.properties['station.name'],
              water_value: element.properties['value'],
              dateTime: element.properties['datetime'],
            });
          }
      })
    });
  });
}


   render(){
    return(
      <div>
        <Tiles />
        <Form loadData={this.getData}/>
        <WaterData 
           station_name={this.state.station_name}
           water_value={this.state.water_value}
           dateTime={this.state.dateTime}
        />
      </div>
   )
  }
}
export default App;

从“React”导入React；
从“./components/Tiles”导入平铺
从“./components/Form”导入表单
从“./components/WaterData”导入WaterData
类应用程序扩展了React.Component{
状态={
站点名称：未定义，
水_值：未定义，
日期时间：未定义
}
getData=async（e）=>{
e、 预防默认值（）；
const name=e.target.elements.name.value；
const api_call=等待获取(`https://waterlevel.ie/geojson/latest/`)
。然后（响应1=>{
response1.json（）.then（数据=>{
Array.from（data.features）.forEach（element=>{
if（element.properties['station.name']==name）{
这是我的国家({
站点名称：element.properties['station.name']，
water_value:element.properties['value']，
dateTime:element.properties['dateTime']，
});
}
})
});
});
}
render（）{
返回(
)
}
}
导出默认应用程序；

WaterData.js

import React from 'react';
const Weather = (props) => {


console.log(props)

  return(
    <li>
      <p>Location {props.station_name}</p>
      <p>Value {props.water_value}</p>
      <p>Date Time: {props.dateTime}</p>
    </li>
  )
}
export default Weather;

从“React”导入React；
常量天气=（道具）=>{
控制台日志（道具）
返回(

位置{props.station_name}

值{props.water_Value}

日期时间：{props.dateTime}


)
}
导出默认天气；

---

有人能向我解释为什么这4个响应不显示吗？

发生这种情况是因为您正在为数据的每个部分替换状态中的值

您可以使用

filter

筛选出阵列中所需的元素

然后只将整个阵列放入您的状态一次：

const api_call = await fetch(`https://waterlevel.ie/geojson/latest/`)
.then(response1 => {
  response1.json().then(data => {
    const features = Array.from(data.features)
      .filter(el => el.properties['station.name'] === name);
    this.setState({ features });
  })
});

但现在，要渲染所有这些对象，需要映射状态值：

   render(){
    return(
      <div>
        <Tiles />
        <Form loadData={this.getData}/>
        {this.state.features.map(feat => <WaterData 
           key={/* Find something unique*/}
           station_name={feat.properties['station.name']}
           water_value={feat.properties['value']}
           dateTime={feat.properties['datetime']}
        />)}
      </div>
    )
  }

---

您是否尝试过在

.forEach

循环中设置断点？我很好奇页面是否会随着每次迭代而改变。如果您直接将传入数据设置为state，它会将循环中的最后一个数据设置为您的state。您必须将数据指定为处于状态的数组，并在渲染时使用

map

方法将其循环。是的，每次迭代时显示都会被覆盖由于这一点，它几乎就在那里，它现在的状态我的状态是未定义的？无法读取undefinedOh的属性映射，对，这将使您的组件崩溃，直到状态更改，请检查我的编辑。您也可以在渲染中放置

this.state.features&&this.state.features.map（

），作为替代

  state = {
    features: []
  }