Блог

У меня возникла проблема, из-за которой моя страница не обновляется при вызове функции обновления, которую я передал.

 function ProductsPage(props) {  const [products, setProduct] = useState([])  const [shouldRefresh, setRefresh] = useState(false)   function refreshProducts() {  setRefresh(!shouldRefresh)  }   const token = localStorage.getItem("token")  const headers = { Authorization: "Token "   token }   useMemo(() =gt; (axios.get("/products", { headers: headers }).then((resp) =gt; (  setProduct(resp.data)  ))  ), shouldRefresh)   return (  lt;Box className="cardDeck"gt;  lt;Redirect_if_not_logged_in /gt;  {products.map((product) =gt; (  lt;InfoCard product={product} refresh={refreshProducts}gt;lt;/InfoCardgt;  )).reverse()}  lt;/Boxgt;  ) }  

Всякий раз, когда я звоню props.refresh() с инфокарты, ничего не происходит.

Вам нужно будет использовать крючок useEffect вместо useMemo

 function ProductsPage(props) {  const [products, setProduct] = useState([]);  const [shouldRefresh, setRefresh] = useState(false);   function refreshProducts() {  setRefresh(!shouldRefresh);  }   const token = localStorage.getItem("token");  const headers = {  Authorization: "Token "   token,  };   useEffect(() =gt; {  axios  .get("/products", {  headers: headers,  })  .then((resp) =gt; setProduct(resp.data));  }, [shouldRefresh]);   return (  lt;Box className="cardDeck"gt;  lt;Redirect_if_not_logged_in /gt;  {products  .map((product) =gt; (  lt;InfoCard product={product} refresh={refreshProducts}gt;lt;/InfoCardgt;  ))  .reverse()}  lt;/Boxgt;  ); }  

shouldRefresh в useMemo должен находиться в массиве зависимостей, подобном этому:

 useMemo(() =gt; (axios.get("/products", { headers: headers }).then((resp) =gt; (  setProduct(resp.data) )) ), [shouldRefresh])  

Также я не думаю, что вам нужно использовать здесь, useEffect сделает то же самое