如何解决如何根据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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。