时间戳

首页 > 解决方案 > 使用 ReactApp Javascript 获取条件 API

reactjs - 使用 ReactApp Javascript 获取条件 API

问题描述

我的代码需要一些帮助，当条件如下时它必须显示 API 数据

  1. 使用 componentWillReceiveProps()
  2. 当 count == 2 时，它将获取 api
    import React, {useState, useEffect,Component} from "react";

    var x = 2;
    const App =() => {
      const [hasError, setErrors]= useState(false)
      const [apps, setApps] = useState ("Loading");

      useEffect(()=>{
      async function fetchData(){
        const res = await fetch ("https://m2dzass19b.execute-api.ap-southeast-1.amazonaws.com/dev/api/vdrOptimize/21-09-2019");
        res
          .json()
          .then(res => setApps(res))
          .catch(err => setErrors(err))
      }

        fetchData();
      } );

          return(
            <div>
            <span>{JSON.stringify(apps)}</span>
            <hr/>
            </div>
          );
        }

标签： reactjs

解决方案

好的，这是解决方案

将您的 useEffect 更改为这样

useEffect(() => {
async function fetchData() {
  const res = await fetch(
    "https://m2dzass19b.execute-api.ap-southeast-1.amazonaws.com/dev/api/vdrOptimize/21-09-2019"
  );
  res
    .json()
    .then(res => setApps(res))
    .catch(err => setErrors(err));
}
if (props.id === 2) {
  fetchData();
}
}, [props.id]);

希望能帮助到你

更新：这是您可以使用 comonentWillReceiveProps 的方法

UNSAFE_componentWillReceiveProps(nextProps) {
async function fetchData() {
  const res = await fetch(
    "https://m2dzass19b.execute-api.ap-southeast-1.amazonaws.com/dev/api/vdrOptimize/21-09-2019"
  );
  res
    .json()
    .then(res => this.setState({ apps: res }))
    .catch(err => this.setState({ hasError: err }));
}
if (nextProps.id === 2) {
  fetchData.call(this);
}
}

沙盒

注意：componentWillReceiveProps() 是不推荐使用的生命周期方法

推荐阅读