在 React 中显示多个 API 响应

Question

我正在学习 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;

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;

有人可以向我解释为什么没有显示 4 个响应吗？

Answer 1

发生这种情况是因为您正在为数据的每个部分替换您所在州的值。

您可以使用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>
    )
  }

如果它们彼此相关，则无需将所有值单独存储在您的状态中，不过这对您的子组件来说很好。

为了确保状态值始终是一个数组，请在类的开头给它一个空数组：

  state = {
    features: []
  }