При изменении параметров или запросов компонент не обновляется - PullRequest
0 голосов
/ 07 мая 2020

Я использую response-router-dom v5 и реагирую 16

Всякий раз, когда я перемещаюсь так:

от "/ products /: someId" к "/ products /: someOtherId "

URL изменяется, но компоненты не обновляются соответствующим образом

то же самое с запросами.

" / products? search = something "или" / products? search = someOtherThing "

it действительно работает , когда у меня другой URL-адрес, например« / »или« / users »,

enter image description here

Я использую Link для навигации, я также пробовал ловушку useHistory: history.pu sh, history.replace и withRouter (myComponent);

Вот как я получаю данные из запросов / параметров

async function searchProducts(searchValue) {
  const response = await axios.post(
    "http://localhost:8000/api/products/search",
    { search: searchValue });
  return response.data.body;
}

const useFetchData = (query) => {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    if (products.length === 0) {
      // Use searchProducts for the request
      searchProducts(query).then((foundProducts) => {
        setProducts(foundProducts);
      });
    }
  }, [products, query]);

  return products;
};

, затем я используюFetchData в моем компоненте, который идет:

const ProductList = () => {
  const history = useHistory();
  // parsing query to be -> { search: "value" }
  const urlQuery = queryString.parse(history.location.search);
  const products = useFetchData(urlQuery.search);

  const getList = () => {
    return products.map((product) => {
      return (
        <li key={product._id}>
          <ProductItem product={product} />
        </li>
      );
    });
  };

  return <div className="container">{getList()}</div>;
};

Кнопка поиска находится в другом компоненте заголовка, она всегда там, так как в макете

<button className="header-search-button" onClick={handleClick}>
  Search
</button>

и handleClick:

// searchvalue has it's own onChange handler 
const [searchValue, setSearchValue] = useState("");

// code...

const handleClick = () => {
    // .... some code

    // I also tried with push and Link 
    history.replace(`/products?search=${searchValue}`);
};

1 Ответ

1 голос
/ 07 мая 2020

Без кода это действительно сложно сказать. Но я предполагаю, что вы можете изменить / products? Search = bag на / products? Search = watch. Но после этого он не может обновить состояние и, следовательно, не может повторно визуализировать. При перезагрузке происходит визуализация. Было бы проще, если бы мы могли видеть код.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...