React组件在获取新数据之前呈现旧状态

时间:2020-05-27 23:34:50

标签: javascript reactjs react-hooks

第一次渲染组件时,它是从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

有什么想法吗?

0 个答案:

没有答案