React中useState初始值与实际值不一样的解决方法

2022-02-06

遇到一例很奇葩的情况，刚用useState定义一个状态值，然后打印它，竟然与传入的初始值不一样！

const [value, setValue] = useState(props.value);

// 两个值并不相同，即使value是简单的字符串或数字类型也不行
console.log(props.value, value);

打断点测试，也看不出什么问题。

问题出在父组件传入的属性props，动态变化时，子组件要时刻监听。

useEffect(() => {
    setValue(props.value);
}, [props])

其实该问题本来很简单，难在恰巧父级中想在数据变化时，全量更新子组件，但React“过于智能”，它能分析出不需要创建新的DOM元素。。。

const listItem = nodes.map(node => 
		<GroupLink label={node.name} 
				key={node.id}
	 />);

一句话：React中状态出问题，多考虑用useEffect解决。

（版权归cpury.com所有，转载请注明出处。）

WEB开发