我有一个存储所选项目索引的变量。我使用了一个基于该变量的条件表达式来添加/删除一个类名,以便以一种区分的方式呈现所述项。我将问题归结为以下片段:
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>}
</>
);
}
钩子名为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小时的调试时间。
如果有人对此有正确的解决方案,请在下面分享。
相关问题
- 在Hashmap中查找匹配的键/值对
- 当HashMap增加其大小时,HashMap中值的索引会发生什么?
- 可观察不发射任何值
- Angular 2-订阅FormControl的值更改是否需要取消订阅?
- sizeof()值是由编译器还是链接器决定的?
- clang和gcc之间的右值参考过载差异
- 具有两个具有相同值但不同桶索引的关键对象的Hashmap
- Springboot Gradle插件不适用于Eclipse
- 如何验证PoolingHttpClientConnectionManager是否应用于泽西客户端
- 我们可以将jersey客户端用于Apache CXF网络服务吗?
- 并发哈希映射中值的原子更新-如何?
- 并发:HashMap和列表作为值
- 修改并发哈希映射中的值
- 当两个线程试图将相同的键值放入并发hashmap时会发生什么
- 此用于在GridPane中查找节点位置的代码如何导致NullPointerException?
- 事件处理程序作用于事件源
- 使用过渡和插值器让图像超过2个坐标列表
- 在javafx中将填充应用于画布
- JAVAFX鼠标单击某些值
- javaFX在按钮坐标上显示正确的值