提问者:小点点

反应:基元值的setState不适用于===


我有一个存储所选项目索引的变量。我使用了一个基于该变量的条件表达式来添加/删除一个类名,以便以一种区分的方式呈现所述项。我将问题归结为以下片段:

function App() {
  const [selectedItem, setSelectedItem] = setState(-1);

  setSelectedItem(0);
  console.log(selectedItem);

  return (
    <>
    {selectedItem !== 0 && <p>no item selected</p>}
    {selectedItem === 0 && <p>item {selectedItem} selected</p>}
    </>
  );
}

共3个答案

匿名用户

钩子名为useState,而不是setState

在渲染函数内调用setSelectedItem将触发无限循环。您需要将其移动到效果挂钩,以便它只运行一个。

export default function App() {
  const [selectedItem, setSelectedItem] = useState(-1);

  useEffect(() => {
    setSelectedItem(0);
  }, []);
  
  console.log(selectedItem);

  return (
    <>
    {selectedItem !== 0 && <p>no item selected</p>}
    {selectedItem === 0 && <p>item {selectedItem} selected</p>}
    </>
  );
}

匿名用户

什么是设置状态?你是说useState?此外,您不应该像这样更新状态,您应该在useffect中进行更新,并使用空数组作为依赖项,这样在安装组件时,它将只运行一次:

useEffect(() => {
    setSelectedItem(0);
},[])

那它就像魔法一样有效

匿名用户

替换===!====!=,分别,瞧,它的工作。唉,报告了一个警告,应该使用==来代替。

selectedItem是一个数组,显然原语会产生错误的引用。尽管如此,在某种程度上,内部

希望,这可以为用户节省2小时的调试时间。

如果有人对此有正确的解决方案,请在下面分享。