Компонент React отображает старое состояние перед получением новых данных - PullRequest
Новая
       1

Компонент React отображает старое состояние перед получением новых данных

0 голосов
/ 28 мая 2020

Когда компонент сначала визуализирует, он получает из switchcase (входит ВСЕ регистр, потому что это значение по умолчанию) на хуке usePositions, значение для позиций, и я устанавливаю их там, и возвращаю их контроллеру Positions.

Проблема возникает, когда selectedClient изменяется с ALL на TODAY (это значение контекста, я меняю его в компоненте Sidebar где-то еще) и перед вводом case case в TODAY, чтобы получить сегодняшние позиции, я заметил, что компонент Positions уже отрендерил старое состояние ВСЕХ позиций снова! Затем, через секунду, он правильно отображает сегодняшние позиции. компонент, в котором он вызывает ловушку 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 внутри хука после получения данных

Есть идеи?

...