reactjs - 如何根据api响应在react js中显示组件。?
问题描述
只要 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;
解决方案
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;
推荐阅读
- label - 在 Automl 对象检测中将 2 个不同标签的所有框合并为一个标签
- android - 如何在加速度计中仅获得水平加速度
- php - 将 Opencart 附属变量名称从 Tracking 更改为 Ref?
- r - 如何在按 x 变量而不是填充变量分组的条形图上绘制 geom_line?
- javascript - 如何让搜索过滤器循环遍历库存项目表中的 MULTIPLE 数据类型,并缩小显示的结果范围?
- python - 在 python 中使用 Windows 上 .so 文件中的函数
- c# - 为什么这个 LINQ 查询非常慢?
- list - 从另一个谓词调用谓词
- javascript - 等待带有 v-card 的 v-dialog 需要 Vue.js 的透明背景
- c++ - C++ 向量如何不使用默认构造函数在内存空间中覆盖?