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

Question

只要 api 的响应为真，我就会尝试显示组件。但是，如果我尝试在 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;

Answer 1

axios您应该在 中请求useEffect，并在 中显示所有 UIreturn

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;