localStorage.clear() 在反应中不与三元一起工作

Question

我正在玩弄本地存储似乎无法让它工作这很简单只是玩弄它但是代码。

  const [isFavorite, setIsFavorite] = useState(false);

const favorite = () => {
     setIsFavorite(!isFavorite) ? localStorage.setItem('name', search[0].title) : localStorage.clear() 
}

return(
 <button onClick={favorite} className="favorite">Favorite: {isFavorite ? <FaHeart /> : <FaRegHeart />}  </button>

)

为什么在初始点击时存储值但再次点击时 localStorage.clear() 不是运行，它不能用于三元运算符还是我只是用错了吗？

我也试过在三进制中切换顺序，但似乎从未调用过 .clear()。

Answer 1

setIsFavorite(!isFavorite) ? localStorage.setItem('name', search[0].title) : localStorage.clear()

此代码或多或少等同于：

const x = setIsFavorite(!isFavorite)
if (x) localStorage.setItem('name', search[0].title)
else localStorage.clear()

setIsFavorite(!isFavorite)return是什么意思？可能不是你期望的价值。

尝试单独使用它

setIsFavorite(!isFavorite);
!isFavorite ? localStorage.setItem('name', search[0].title) : localStorage.clear();

Answer 2

首先，单独获取新值。您不应该指望设置的挂钩值。其次，调用函数的 ternarnik 不是纯代码——使用 if else。祝学习 React 顺利。

const favorite = () => {
     const newFavoriteState = !isFavorite;
     setIsFavorite(newFavoriteState)
     if (newFavoriteState) 
       localStorage.setItem('name', search[0].title)
     else
       localStorage.clear() 
}

localStorage.clear() 在反应中不与三元一起工作

localStorage.clear() isn't working with ternary in react

local-storage

reactjs