React UseEffect - 仅在数据更改时执行
React UseEffect - Executing only when data is changed
我知道传递给 useEffect 的函数在每个组件渲染时执行,我处于这样一种情况,我需要 useEffect
挂钩而不是 运行 在初始渲染时,但只有在渲染这些数据时才需要 => home.matchsPlayed, home.winHome
这是我的实际情况
useEffect(() => {
setData(prev =>
prev.concat([
{
day: home.matchsPlayed,
[selectedHomeName]: home.winHome
}
])
);
},[home.matchsPlayed, home.winHome, selectedHomeName]);
console.log('data', [data]);
数据数组如下所示
我看到了一个解决方案,我可以利用 useRef
通过 useEffect
跟踪 initialMount
所以我改成了
const isInitialMount = useRef(true);
useEffect(() => {
if (isInitialMount.current) {
isInitialMount.current = undefined;
} else {
setData(prev =>
prev.concat([
{
day: home.matchsPlayed,
[selectedHomeName]: hhome.winHome
}
])
);
}
},[home.matchsPlayed, home.winHome, selectedHomeName]);
数组现在少了 1 个未定义的对象,稍微好一点
我希望我的 data
array
是这样的,没有前 3 个未定义的对象,因为数据未在初始渲染中呈现。 如何实现?
Data: [
{day:22, Sao Paulo: -8},
{day:16, Sao Paulo: -2},
{day:27, Sao Paulo: -9}
],
我在此处重现了案例 => https://codesandbox.io/s/cool-wind-sism9(为了查看演示,必须安装 chrome 扩展来解锁 CORS,我使用 CORS Unblock)
useEffect(() => {
if (!home.matchsPlayed || !home.totalCal || !selectedHomeName) {
return;
}
setData(prev =>
prev.concat([
{
day: home.matchsPlayed,
[selectedHomeName]: home.totalCal
}
])
);
},[home.matchsPlayed, home.totalCal, selectedHomeName]);
这样不行吗?
我知道传递给 useEffect 的函数在每个组件渲染时执行,我处于这样一种情况,我需要 useEffect
挂钩而不是 运行 在初始渲染时,但只有在渲染这些数据时才需要 => home.matchsPlayed, home.winHome
这是我的实际情况
useEffect(() => {
setData(prev =>
prev.concat([
{
day: home.matchsPlayed,
[selectedHomeName]: home.winHome
}
])
);
},[home.matchsPlayed, home.winHome, selectedHomeName]);
console.log('data', [data]);
数据数组如下所示
我看到了一个解决方案,我可以利用 useRef
通过 useEffect
initialMount
所以我改成了
const isInitialMount = useRef(true);
useEffect(() => {
if (isInitialMount.current) {
isInitialMount.current = undefined;
} else {
setData(prev =>
prev.concat([
{
day: home.matchsPlayed,
[selectedHomeName]: hhome.winHome
}
])
);
}
},[home.matchsPlayed, home.winHome, selectedHomeName]);
数组现在少了 1 个未定义的对象,稍微好一点
我希望我的 data
array
是这样的,没有前 3 个未定义的对象,因为数据未在初始渲染中呈现。 如何实现?
Data: [
{day:22, Sao Paulo: -8},
{day:16, Sao Paulo: -2},
{day:27, Sao Paulo: -9}
],
我在此处重现了案例 => https://codesandbox.io/s/cool-wind-sism9(为了查看演示,必须安装 chrome 扩展来解锁 CORS,我使用 CORS Unblock)
useEffect(() => {
if (!home.matchsPlayed || !home.totalCal || !selectedHomeName) {
return;
}
setData(prev =>
prev.concat([
{
day: home.matchsPlayed,
[selectedHomeName]: home.totalCal
}
])
);
},[home.matchsPlayed, home.totalCal, selectedHomeName]);
这样不行吗?