如何根据api响应在react js中显示组件？

问题描述

我会尝试在api的响应为true时显示组件。但是，如果我尝试在iam发送api请求的axios中执行此操作，则它不起作用，并且如果我删除了以下返回内容，则会给我一个错误，提示没有要渲染的内容。

我的代码

import React from "react";
import { useState,useEffect } from "react";
import { SignUpComponent } from "../index";
import axios from "axios";
import { Redirect,useParams } from "react-router-dom";
import { getToken } from "../../common/constants/variables";

function Reference() {
  const [openSignUp,setopenSignup] = useState(true);
  const [refer,setRef] = useState({});
  let { ref } = useParams();
  function toggletoSignUp() {
    setTimeout(() => {
      setopenSignup(true);
    },350);
  }
  axios
    .post("https://theappsouk.com/api/v1/check-referral",{
      ref: ref,})
    .then((response) => {
      if (response.data.status == true) {
        return (
          <SignUpComponent open={openSignUp} toggleModal={toggletoSignUp} />
        );
      } else{
        <Redirect to= '/'/>
        console.log("nothing")
      }
      console.log("REFFEERR",JSON.stringify(response.data.status));
    });
  console.log("REFF",JSON.stringify(ref));
  return ( //what ever the api response is it seems to render only this return statement
    <div>
       <SignUpComponent open={openSignUp} toggleModal={toggletoSignUp} />
    </div>
  );
}
export default Reference;

解决方法

您应该在axios中请求useEffect，并在return内显示所有用户界面

import React from "react";
import { useState,useEffect } from "react";
import { SignUpComponent } from "../index";
import axios from "axios";
import { Redirect,useParams } from "react-router-dom";
import { getToken } from "../../common/constants/variables";

function Reference() {
  const [openSignUp,setOpenSignup] = useState(true);
  const [status,setStatus] = useState(true);
  const [refer,setRef] = useState({});
  let { ref } = useParams();
  function toggleToSignUp() {
    setTimeout(() => {
      setOpenSignup(true);
    },350);
  }
  
  useEffect(() => {
    axios
    .post("https://theappsouk.com/api/v1/check-referral",{
      ref: ref,})
    .then((response) => {
      setStatus(response.data.status)
    });
  },[]);

  return ( //what ever the api response is it seems to render only this return statement
    <div>
        {
          status? <SignUpComponent open={openSignUp} toggleModal={toggleToSignUp} /> :
          <Redirect to= '/'/>
        }
    </div>
  );
}
export default Reference;