如何根据 api response. 在 react js 中显示组件？

Question

我正在尝试在 api 的响应为真时显示组件。但是，如果我尝试在发送 api 请求的 axios 中执行此操作，则它不起作用，并且如果我删除下面的 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 [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

你应该在useEffect中请求axios，并在return

中显示所有UI

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;

如何根据 api response. 在 react js 中显示组件？

How to display a component in react js according to api response.?

post

httpresponse

reactjs

axios

dynamic-routing