React使用useState初始化对象后,不能更新的原因之一及解决方法
2024-09-01
React自定义组件时,使用useState初始化值,如果用到当前文件中组件外的对象,一定要先克隆一份。
避免组件操作中引用状态值时,指向原来的对象,造成不正常的更新变化。
参考示例:
import React, { useRef, useState, useEffect } from 'react';
const options = [
{ type: 'FORWARD', name: '正向', checked: true },
{ type: 'REVERSE', name: '反向' },
{ type: 'UNDIRECTED', name: '无向' },
{ type: 'BOTHWAY', name: '双向' },
]
const getOptions = (value) => {
options.forEach(option => {
option.checked = value.includes(option.type);
})
return options;
}
export default function DropDownList(props) {
const [data, setData] = useState(getOptions([]));
const onClick = e => {
data.forEach(item => {
item.checked = true;
})
setData([...data]);
}
return (
<>
<div className={styles.wrap} onClick={onClick}>
</div>
</>
)
}
其中,getOptions里面引用了options,而且onClick中用到了data,实际上这两个是同一个指针地址,setData不一定能正确更新。
最好克隆一份避免不必要的麻烦,如:
const getOptions = (value) => {
const temp = JSON.parse(JSON.stringify( options ));
temp.forEach(option => {
option.checked = value.includes(option.type);
})
return temp;
}
(版权归cpury.com所有,转载请注明出处。)