如何在反应中显示来自api的数据

Posted 2023-02-23

【中文标题】如何在反应中显示来自api的数据

【英文标题】：How to display data from the api in react

【发布时间】：2021-07-27 11:30:42

【问题描述】：

我想学习如何在 reactjs 中显示来自 API 的数据..

这是API，我想在weather[0]对象中的API中显示description属性和temp对象中的temp属性。

怎么做？

这是代码：

    import logo from './Images/logo.png';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import  Navbar, Button, Form, FormControl  from 'react-bootstrap';
import React,  Component  from "react";


class App extends Component 
  constructor(props) 
    super(props);
    this.state = ;

  

  componentDidMount() 
    if (navigator.geolocation) 
      navigator.geolocation.watchPosition(async function (position) 
        console.log("Latitude is :", position.coords.latitude);
        console.log("Longitude is :", position.coords.longitude);

        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
    
        const url = `http://api.openweathermap.org/data/2.5/weather?lat=$lat&lon=$lon&units=metric&appid=ca148f5dc67f12aafaa56d1878bb6db2`;
        const response = await fetch(url);
        let data = await response.json();
        
        console.log(data);
      );
    
  

  render() 
    return (
      <div className="App">

        <Navbar bg="light" expand="lg">
          <Navbar.Brand href="#">Weather Forecast <img src=logo    /></Navbar.Brand>
          <Navbar.Toggle aria-controls="navbarScroll" />
          <Navbar.Collapse id="navbarScroll">

            <Form className="d-flex">
              <FormControl
                type="search"
                placeholder="Enter City"
                className="mr-2"
                aria-label="Search"
              />
              <Button variant="outline-success" className="searchBTN">Forecast</Button>
            </Form>
          </Navbar.Collapse>
        </Navbar>

      </div>
    );
  


export default App;

我可以获取一些如何在页面上显示这些属性的示例吗？

已解决

只需将navigator.geoposition 函数中的async function (position) 替换为async (position) =>，即可成功获取数据。

【问题讨论】：

将数据写入状态，然后在渲染方法中调用状态。

我想在 API 中显示位于 weather[0] 对象中的 description 属性和位于 main 对象中的 temp 属性。我可以举一些例子吗？

这些是最重要的 React 想法之一，在就 *** 提出基本问题之前，您应该先尝试阅读文档：reactjs.org/docs/state-and-lifecycle.html#using-state-correctly

【参考方案1】：

您为 api 提供了另一个 url，但在您的代码中，您正在使用一些参数调用另一个 url。但是，如果我们假设 url 是您在问题中提到的那个。您可以调用 api 并给出如下结果：

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import  Navbar, Button, Form, FormControl  from "react-bootstrap";
import React,  Component  from "react";

class App extends Component 
  constructor(props) 
    super(props);
    this.state = ;
  

  componentDidMount() 
    const url =
      "https://api.openweathermap.org/data/2.5/weather?q=plovdiv&units=metric&appid=ca148f5dc67f12aafaa56d1878bb6db2";
    fetch(url)
      .then((response) => response.json())
      .then((data) => this.setState(data))
      .catch((e) => 
        console.log(e);
      );
  

  renderWeatherDescription = () => 
    if (this.state && this.state.weather && this.state.weather[0])
      return <p>this.state.weather[0].description</p>;
  ;

  renderMainTemp = () => 
    if (this.state && this.state.main) return <p>this.state.main.temp</p>;
  ;

  render() 
    return (
      <div className="App">
        <Navbar bg="light" expand="lg">
          <Navbar.Brand href="#">
            Weather Forecast <img    />
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="navbarScroll" />
          <Navbar.Collapse id="navbarScroll">
            <Form className="d-flex">
              <FormControl
                type="search"
                placeholder="Enter City"
                className="mr-2"
                aria-label="Search"
              />
              <Button variant="outline-success" className="searchBTN">
                Forecast
              </Button>
            </Form>
          </Navbar.Collapse>
        </Navbar>
        this.renderWeatherDescription()
        this.renderMainTemp()
      </div>
    );
  


export default App;

这是可执行示例：

您也可以使用导航器查看此链接以获取完整答案：

【讨论】：

API和url一样，只是API按城市搜索url按坐标搜索

@BlagovestPizhev 看来您编写它以获得latitude 和longitude 的代码出错了。

@BlagovestPizhev 检查沙箱中的第二个代码以获得答案。但由于导航器给出错误，它再次调用第一种方法。

@BlagovestPizhev 为什么你改变了接受的答案？

您可以在这里查看吗：***.com/questions/68548672/…

【参考方案2】：

就位，你有 console.log(data);只需调用 this.setState( ...something )。

您将对象传递给 setState，因此您传递的所有内容都会保存到状态。

this.setState 也会触发自动重新渲染，所以如果你在 rendet 方法中使用 this.state，变量会被更新并重新渲染。

<div>this.state.xxx</div>

你也可以渲染集合。

<div>this.state.someArray.map((item) => item.description)</div>

【参考方案3】：

我不确切知道 API 响应的样子，您可以通过控制台记录它以查看响应的确切结构。这是一个如何根据您对响应对象的描述来呈现它的示例。您要做的第一件事是将响应对象放入状态，第二件事是将其显示在渲染方法中（从状态）。

import logo from './Images/logo.png';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import  Navbar, Button, Form, FormControl  from 'react-bootstrap';
import React,  Component  from "react";


class App extends Component 
  constructor(props) 
    super(props);
    this.state = ;

  

  componentDidMount() 
    if (navigator.geolocation) 
      navigator.geolocation.watchPosition(async (position) => 
        console.log("Latitude is :", position.coords.latitude);
        console.log("Longitude is :", position.coords.longitude);

        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
    
        const url = `http://api.openweathermap.org/data/2.5/weather?lat=$lat&lon=$lon&units=metric&appid=ca148f5dc67f12aafaa56d1878bb6db2`;
        const response = await fetch(url);
        let data = await response.json();
        
        console.log(data);

        this.setState(data);
      );
    
  

  render() 
    return (
      <div className="App">

        <Navbar bg="light" expand="lg">
          <Navbar.Brand href="#">Weather Forecast <img src=logo    /></Navbar.Brand>
          <Navbar.Toggle aria-controls="navbarScroll" />
          <Navbar.Collapse id="navbarScroll">

            <Form className="d-flex">
              <FormControl
                type="search"
                placeholder="Enter City"
                className="mr-2"
                aria-label="Search"
              />
              <Button variant="outline-success" className="searchBTN">Forecast</Button>
            </Form>
          </Navbar.Collapse>
        </Navbar>

        <div>
            <p>this.state.weather && this.state.weather[0].description</p>
            <p>this.state.main && this.state.main.temp</p>
        </div>
      </div>
    );
  


export default App;

【讨论】：

Cannot read property '0' of undefined 我在使用此代码时看到此错误。但在构造函数中我没有在 setState 中设置数据，只使用 this.setState(data);在函数中？你能在我的问题中检查上面的API吗..api.openweathermap.org/data/2.5/…

@BlagovestPizhev 尝试这样做this.state?.weather[0]?.description

我收到错误：TypeError: _this$state.weather is undefined

发生此错误的原因是您试图从第一次渲染时尚不存在的状态显示信息。它需要一秒钟来自API，然后你可以显示它......我将更新答案以在显示之前检查信息是否存在。如果您使用的是打字稿，则可以使用“？” @PCPbiscuit 提到的方法。