Question

我正在 React 中制作一个切换组件，并使用 LARAVEL 将状态发送到我的数据库。

当我发送切换状态时，在数据库中它注册为 1 或 0，但是当我激活/禁用切换时，在 console.log 中显示 true 和 false 的值。

这里的问题是，当我将值发送到数据库并想要获取它时，切换无法识别 0 和 1，因为我正在为 if true 或 {{1} 编写条件，所以我无法读取数据库上注册的值为 0/1 的值。

是否有关于如何将接收到的布尔值转换为 true/false 的解决方案？

钩子和处理程序：

false

切换代码：

const [showlogo, setshowlogo] = useState('');

const HideLogo = () => {
    setshowlogo(!showlogo);
    console.log(showlogo)        
  }

Answer 1

如果要将 0 和 1 切换为布尔值：

const { useState } = React
const response = {data: {showlogo: 0}}

function App() {
  
  const [showlogo, setShowlogo] = useState(response.data.showlogo);

  const hideLogo = () => {
    setShowlogo(prev => prev === 0 ? 1 : 0); // <-- HERE
  }

  return (<div>
     <div onClick={hideLogo} >Toggle (click), showlogo: {showlogo}</div>
     <div className={showlogo===1?"on":"off"}> Valeur of logo</div>
  </div>)
}

ReactDOM.render(<App />, document.body)

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Answer 2

你的初始值应该是布尔值

import React from "react";
let count = 1;
export default function App() {
  const [showlogo, setshowlogo] = React.useState(0);

  const HideLogo = (id) => {
    if (id % 2 !== 0) setshowlogo(1);
    else setshowlogo(0);
    count++;
  };
  return (
    <div>
      <button onClick={() => HideLogo(count)}>Toggle</button>
      {showlogo && (
        <div className={`${showlogo ? "on" : "off"}`}>Valeur of logo</div>
      )}
    </div>
  );
}

Demo

只需传递您从 DB 收到的 ID

onClick={() => HideLogo(ID)}

并根据传递的 ID 在此处切换

const HideLogo = (id) => {
   if (id=== 0) setshowlogo(1);
   else setshowlogo(0);
  };

Answer 3

如果您正在处理来自数据库的 1 和 0，您可以使用 Boolean(x) -

将它们转换为布尔值

Boolean(0) // false
Boolean(1) // true

然后如果您必须再次将它们保存为 0 或 1，请将它们从布尔值转换回数字 -

const x = showLogo ? 1 : 0
// then send x back to the db

Answer 4

建议使用布尔值的其他答案，但由于您的数据库返回 1 或 0，并且听起来您无法控制它，因此替代使用 === 运算符

showLogo === 1 ? 'on' : 'off'

并使用以下命令在 1 和 0 之间切换

setShowLogo( showLogo === 1 ? 0 : 1 )

const status = 0

console.log(Boolean(status === 0))
console.log(Boolean(status === 1))

// IF it's a string then use String

const stringStatus = '0'

console.log(Boolean(stringStatus === '0'))
console.log(Boolean(stringStatus === '1'))

在 React 中将 0 和 1 切换为布尔值

4 个答案: