NodeJS 在js中处理布尔型api

jrcvhitl 于 2022-11-03 发布在 Node.js

关注(0)|答案(2)|浏览(146)

我的一个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"
    }
]

node.js

来源：https://stackoverflow.com/questions/74299280/deal-with-boolean-api-in-js

2条答案

按热度按时间

hfsqlsce1#

您可能应该改变方法，声明一个used状态来存储返回的布尔值，并使用条件渲染来相应地调整类。
此外，正如@KcH所建议的，如果您的响应是一个数组，则应该使用索引访问该元素：

import { useState, useEffect } from 'react';

const MembershipLight = (code) => {
  const [used, setUsed] = useState(false);

  const lighting = () => {
    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) => {
      if (actualData.length > 0) {
        setUsed(actualData[0].used)
      }
    })
    .catch((err) => console.log(err));
  }

  useEffect(() => {
    lighting();
  }, []);

  return <div className={`h-2.5 w-2.5 rounded-full mr-2 ${used ? 'bg-red-700' : 'bg-green-400'}`}></div>;
};

export default MembershipLight;

赞(0）回复(0）举报 2022-11-03

mlmc2os52#

此外，你并没有从lighting函数中返回任何东西，你应该返回fetch的结果，目前，你的MembershipLight返回undefined。

赞(0）回复(0）举报 2022-11-03