第一次渲染组件时,它是从usePositions钩子上的switchcase(输入ALL case,因为它是默认值)获得的,并在此处设置了position的值,然后将它们返回到Positions控制器。
问题是当selectedClient从ALL更改为TODAY(其上下文值,我在其他地方的侧边栏组件中将其更改)时出现的,并且在以TODAY值输入切换案例以获取今天的头寸之前,我注意到了头寸组件已经再次呈现了所有位置的旧状态!然后一秒钟后,它会正确呈现当前位置。
我注意到了这一点,因为我的网络标签上的浏览器显示了对服务器的调用,IndividualPosition使其表示已呈现
这是我的组件,它称为usePositions钩子
export const Positions = () => {
const { selectedClient } = useSelectedClientValue();
const { loading, setLoading } = useLoadingValue();
const { positions } = usePositions(selectedClient);
const clientName =
typeof selectedClient === "string" ? selectedClient : selectedClient.name;
useEffect(() => {
setLoading(false);
}, [positions]);
let positionsView = (
<ul className="positions__list">
{positions.map((position) => (
<IndividualPosition position={position} key={position.positionId} />
))}
</ul>
);
return (
<div className="positions" data-testid="positions">
{!loading ? (
<>
<div className="positions__header">
<h2 data-testid="client-name">{clientName}</h2>
</div>
{positionsView}
</>
) : (
<div className="loading-main-window">
<Spinner />
</div>
)}
</div>
);
};
这是我获取数据的钩子
export const usePositions = selectedClient => {
const [positions, setPositions] = useState([]);
const {setLoading} = useLoadingValue()
useEffect(() => {
setLoading(true);
switch (selectedClient) {
case 'ALL':
getPositions().then(pos => {
setPositions(pos);
});
break;
case 'TODAY':
getTodayPositions().then(pos => {
setPositions(pos);
});
break;
default:
break;
}
}, [selectedClient]);
return {positions, setPositions};
};
useEffect在每次selectedClient更改时运行
看起来该组件在获取今天的数据之前再次呈现,这就是为什么它在获取新数据之前显示旧状态,但是我认为可以通过加载标志来避免这种情况
基本上:
-Positions渲染,钩子获取allPositions,它很好 -如果我在侧栏中更改selectedClient上下文值的值,则Positions组件将再次呈现,呈现IndividualComponent但状态为allPositions。 -相反,它应该等到todaysPositions获取以显示新状态(加载应执行此操作)
我已经尝试过加载本地状态(我的加载是上下文值) 在本地组件而不是我的钩子上的useEffects中移动负载 在获取数据后,将钩子内部的加载设置为false
有什么想法吗?