我的一个api响应带有boolean(名称为:used
),我的逻辑是,如果使用响应,将显示red_light
,如果不使用,将显示green_light
。
const red_light = <div className="h-2.5 w-2.5 rounded-full bg-red-700 mr-2"></div>
const green_light = <div className="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div>
function lighting(code) {
fetch(`API`)
.then((response) => {
if (!response.ok) {
throw new Error(
`This is an HTTP error: The status is ${response.status}`
);
}
return response.json();
})
.then((actualData) => {
return (actualData.used ? red_light : green_light)
})}
const MembershipLight = (code) => {
return (
lighting(code)
);
};
export default MembershipLight;
但是那一页是空白的,我做错了哪一部分?
我尝试使用actualData
执行console.log
,它会显示整个响应部分,包括使用true
/false
执行used
,但当我执行console.log("actualData.used")
时,它会在控制台中显示undefined
。actureData
(来自 Postman )
[
{
"used": true,
"create_date": "1644490502",
"update_date": "1666694655"
}
]
2条答案
按热度按时间hfsqlsce1#
您可能应该改变方法,声明一个
used
状态来存储返回的布尔值,并使用条件渲染来相应地调整类。此外,正如@KcH所建议的,如果您的响应是一个数组,则应该使用索引访问该元素:
mlmc2os52#
此外,你并没有从
lighting
函数中返回任何东西,你应该返回fetch
的结果,目前,你的MembershipLight
返回undefined
。