javascript - Inline-if always uses the true condition

Question

I was writing some reactJS code, when I wanted some conditional rendering. For that I made an inline-if, that renders a component if the variable rememberMe is true, but the code always renders the "if it's true part". Help would be appreciated.

    const [rememberMe, setRememberMe] = useState(localStorage.getItem('rememberMe'))
    const [asWho, setAsWho] = useState(localStorage.getItem('asWho'))

    useEffect(() => {
        localStorage.setItem('rememberMe', false)
        console.log(localStorage.getItem('rememberMe'))
        console.log(rememberMe)
        if (rememberMe === null) {
            localStorage.setItem('rememberMe', false)
            setRememberMe(false)
        }
    }, [])

    return (
        <div>
            { rememberMe ? <GroupList test={rememberMe} /> : <PleaseLogIn /> }
        </div>
    )

I printed rememberMe in <GroupList /> and it even prints false. Help would be much apprechiated.

export default function GroupList(params) {
    console.log(params.test)
    return (
        <div>
            logged in
            <br/>
            remember: {params.test}
        </div>
    )
}

标签： javascripthtmlreactjsif-statementweb

Answer 1

At first let's look at what localStorage.getItem('rememberMe') returns:

console.log(typeof localStorage.getItem('rememberMe'))
// Result
>> "string"

Any string value placed in if or ternary if-else will be evaluate as true.

Let's look at this:

// These lines will always print true whether string is "false" or  "true"
console.log(Boolean(localStorage.getItem('rememberMe')))
console.log(Boolean("false"))
console.log(Boolean("true"))
// Result
>> true
>> true
>> true

When you are using if statement any expression is converted to Boolean so any string (if it is not empty) will evaluate as true

So, You need to compare if it's "false" ( Or "true")

const [rememberMe, setRememberMe] = useState(localStorage.getItem('rememberMe') == 'true')
const [asWho, setAsWho] = useState(localStorage.getItem('asWho') == 'true')

useEffect(() => {
    localStorage.setItem('rememberMe', false)
    console.log(localStorage.getItem('rememberMe'))
    console.log(rememberMe)
    if (rememberMe === null) {
        localStorage.setItem('rememberMe', false)
        setRememberMe(false)
    }
}, [])

return (
  <div>
      {rememberMe ? <GroupList test={rememberMe} /> : <PleaseLogIn />}
  </div>
)