Запрос ловушки реакции не обновляется при изменении состояния - PullRequest
Новая
       1

Запрос ловушки реакции не обновляется при изменении состояния

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

У меня есть компонент React с двумя входами select; Select A позволяет вам выбрать размер, а затем, в зависимости от того, что выбрано, этот размер передается в обработчик React (getPackageBySize), который выполняет запрос GET, который возвращает список параметров этого размера для Select B. Итак: 

Select A = 100 should return options ['A','B','C']
Select A = 50 should return options ['X','Y','Z']

Когда компонент загружается с начальным значением размера "100", он загружает правильные параметры для выбора B (['A', 'B', 'C']). Однако, если я затем выберу новый размер из Select A, он не обновит параметры в Select B до ['X', 'Y', 'Z']. Вот ловушка: 

  const [
    options,
    refetchOptions,
  ] = getPackageBySize(
    props.size
  );

И ловушка useEffect, которая снова вызывает первую ловушку при каждом изменении размера: 

  useEffect(() => {
    refetchOptions(
      props.size
    );
  }, [props.size]);

И 'getPackageBySize': 

export default (size: string) => {
  const dispatch = useDispatch();
  const [fetch, reFetch] = useAxios({
    options: {
      method: 'get',
      headers: {
        Authorization: getAuthToken(),
        'Content-Type': 'application/json',
      url:
        `${routes.search.api.ROOT}` +
        '?q=TYPE:"package" AND =size:"' +
        size +
        '"',
    },
    forceDispatch: () => true,

    handler: (error: any, response: any) => {
      if (error) {
        dispatch(
          addToast({
            labels: {
              heading: 'Error',
              details: `${error.message}`,
            },
            variant: 'error',
          })
        );
      }
      if (response) {
        return console.log('Response: ', response);
      }
    },
  });
  return [fetch, reFetch];
};

Таким образом, при начальной загрузке он ищет размер по умолчанию 100 и возвращает ['A', 'B', 'C']. Когда я изменяю Select A на 50, я вижу, что getPackageBySize получает правильный аргумент размера '50'. Он вставляет его в URL-адрес, и запрос обрабатывается, однако, когда я получаю ответ, я вижу, что URL-адрес в ответе все еще использует исходный размер: 

url: "http://localhost:4001/http://site.local:8080/search/content?q=TYPE:"package" AND =size:"100""

Если я выйду со страницы, а затем return, он выполняет запрос с правильным значением 50, и я получаю обратно ['X', 'Y', 'Z'].

Кто-нибудь знает, как обеспечить обновление URL-адресов, не выходя из страницу и вернуться?

1 Ответ

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

Если я хорошо понимаю, вы не используете состояние для хранения результатов, возвращаемых вашим вызовом ax ios. Если я прав, то это нормально. Вам необходимо обновить состояние или опору, чтобы запустить повторный рендеринг вашего компонента (и, таким образом, обновите выбранное значение).

...