现在不明白为什么useSelector获取到的数据值是通过useEffect来监控的,并且使用useState来闭环渲染页面 这是我的代码:
const data = useSelector((state: DeviceList) => {
if (state.basicSetting !== null) {
return state.basicSetting.filter(
item =>
item.deviceName.includes('ac') &&
!item.deviceName.includes('bz'),
);
} else {
return null;
}
});
const [list, setList] = useState<DeviceDataOne[][]>([]);
useEffect(() => {
if (data !== null) {
let arr = [];
for (var i = 0; i < (data as DeviceDataOne[]).length; i += 4) {
arr.push((data as DeviceDataOne[]).slice(i, i + 4));
}
setList(JSON.parse(JSON.stringify(arr)));
} else {
setList([]);
}
}, [data]);
useEffect(() => {
console.log('list', list);
}, [list]);
useEffect(() => {
console.log('data', data);
}, [data]);
我对useEffect监控的理解应该是当数据改变的时候,他会重新执行useEffect里的代码。然而我实际上发现这样的写法会导致无限的重新渲染。因此,我无法理解为什么会出现死循环。
我尝试注释中间的代码
useEffect(() => {
if (data !== null) {
let arr = [];
for (var i = 0; i < (data as DeviceDataOne[]).length; i += 4) {
arr.push((data as DeviceDataOne[]).slice(i, i + 4));
}
setList(JSON.parse(JSON.stringify(arr)));
} else {
setList([]);
}
}, [data]);
但是我不明白为什么我不能这样写。我也不明白是什么导致了这样的问题。你能帮我解决这些问题吗?
我对useEffect监控的理解应该是当数据改变的时候,他会重新执行useEffect里的代码。
这是正确的,但是
data
is 正在更改:每次渲染组件时,useSelector
函数都会返回一个新列表,并且在 JavaScript 中,两个列表不会仅仅因为它们当前包含相同的元素而被视为相等.
您的效果触发无限循环的原因是它每次都会更改
list
状态,从而触发新的渲染,从而更改 data
,从而再次触发该效果。