三元运算符没有监听本地状态答案

【问题标题】：ternary operator is not listening to local state三元运算符没有监听本地状态
【发布时间】：2019-12-16 11:05:14
【问题描述】：

当我将鼠标悬停在我的 div 上时，我希望我的 className 发生变化。如果我控制台记录状态，它会根据鼠标的位置从真变为假。当我尝试将它与三元运算符一起使用时，它总是将自身设置为 false？

import React, { useState } from 'react';
function NavigationBar() {
  const [hover, setHover] = useState({hover: false})

  const noHovering = 'flex flex-row bg-white'
  const hovering = 'flex flex-row bg-black'
  return (
  <div className='h-screen max-h-screen w-1/6 float-left shadow-2xl flex flex-col' style={{backgroundColor: '#2b2b2b'}}>
    <div className='h-20 flex justify-center items-center' style={{backgroundColor:'#202020'}}>
      <h1 className='text-white items-center font-hairline tracking-widest text-lg'>{hover === true ? "NOT WOKRING" : 'PREVENTION ADMIN'}</h1>
    </div>
    <div className='pl-4 h-full flex flex-col justify-around'>
      <div className= {hover ? hovering : noHovering} onMouseOver={() => setHover({hover:true})} onMouseLeave={() => setHover({hover:false})}>
        <img src={require('../../images/analysis-gray.png')} alt='analysis' className='mr-5 w-6'/> 
        <h5 className='antialiased' style={{color:'#c8c8c8'}} >Insights</h5>
      </div>

【问题讨论】：

我认为您以错误的方式初始化您的状态。试试这个 - const [hover, setHover] = useState(false)

标签： javascript reactjs state ternary

【解决方案1】：

三元运算符始终返回 true，因为您正在检查实例 hover，它是一个真值。

根据您定义状态的方式，您必须检查字段hover 和hover.hover

    const [hover, setHover] = useState({hover: false})
    <div 
     className= {hover.hover ? hovering : noHovering} 
     onMouseOver={() => setHover({hover:true})} 
     onMouseLeave={() => setHover({hover:false})}>
    ..
    </div>

或者，或者切换到一个布尔值，这会使事情变得更简单：

    const [hover, setHover] = useState(false)
    <div 
     className= {hover ? hovering : noHovering} 
     onMouseOver={() => setHover(true)} 
     onMouseLeave={() => setHover(false)}>
    ..
    </div>

【讨论】：

【解决方案2】：

我认为不需要将hover 状态作为对象然后读取其中的属性。你可以这样做：-

const [hover, setHover] = useState(false);
const noHovering = 'flex flex-row bg-white'
const hovering = 'flex flex-row bg-black'

<div 
 className= {hover? hovering : noHovering} 
 onMouseOver={() => setHover(true)} 
 onMouseLeave={() => setHover(false)}>
..
</div>

【讨论】：

【解决方案3】：

hover ? ...总是返回true，因为它是一个对象{ hover: false }，你这里不需要对象，把你的状态改成：

const [hover, setHover] = useState(false)

当你想设置hover:

setHover(true)
// Or
setHover(false)

如果您想将其保留为对象，只需将您的条件更改为：

hover.hover ? hovering : noHovering

【讨论】：

【解决方案4】：

如果要保持当前状态形状，只需使用destructured assignment 提取hover 属性：

//     v       v  extract hover property from state 
const [{ hover }, setHover] = useState({hover: false})

【讨论】：