React useEffect does not fetch paramter into React useState

Question

Why does my article state doesnt have the same Parameter like my cart.filter element. What am I doing wrong, using the useState Hook.

  const [article, setArticle] = useState();
  const [cart, setCart] = useState([]);
  const { id } = useParams();
  useEffect(() => {
    const fetchCartAndPrice = async () => {
      const { sess } = await ApiClientShoppingCart.getCart();
      setCart(sess.cart);
    };
    setArticle(cart.filter((e) => e.id === id));
    fetchCartAndPrice();
  }, []);
  return (
    <div>
      {console.log(cart.filter((e) => e.id === id))}
      {console.log(article)}
    </div>
  );
}

Gabriel Furlan · Accepted Answer · 2021-09-24 14:37:28Z

1

In the moment that you are trying set the articles don't have carts yet. You need wait the cart update creating an exclusive useEffect to cart. Something like this:

const [article, setArticle] = useState();
const [cart, setCart] = useState([]);
const { id } = useParams();

useEffect(() => {
  const fetchCartAndPrice = async () => {
  const { sess } = await ApiClientShoppingCart.getCart();
    setCart(sess.cart);
  };

  fetchCartAndPrice();
}, []);

useEffect(() => {
  setArticle(cart.filter((e) => e.id === id));
}, [cart]);

return (
  <div>
    {console.log(cart.filter((e) => e.id === id))}
    {console.log(article)}
  </div>
);

answered Sep 24, 2021 at 14:37

Gabriel Furlan

643 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Seba99 · Accepted Answer · 2021-09-24 14:34:57Z

0

When you trigger your function setArticle() the async function which fetch the cart didn't finished yet ... So it can't "filter" the (still empty) cart ...

You need to execute that filter thing after the cart is set :

const [article, setArticle] = useState();
const [cart, setCart] = useState([]);
const { id } = useParams();
useEffect(() => {
  const fetchCartAndPrice = async () => {
    const { sess } = await ApiClientShoppingCart.getCart();
    setCart(sess.cart);
  };
}, []);

useEffect(() => {
  // --> ensure we are not in the "init step"
  if (cart.length) {
    setArticle(cart.filter((e) => e.id === id));

    // Not sur where this one belongs ... :
    fetchCartAndPrice();
  }
}, [cart]);

return (
  <div>
    {console.log(cart.filter((e) => e.id === id))}
    {console.log(article)}
  </div>
);

Another maner to do so is to set the article at the same place of the cart :

useEffect(() => {
  const fetchCartAndPrice = async () => {
    const { sess } = await ApiClientShoppingCart.getCart();
    setCart(sess.cart);
    setArticle(sess.cart.filter((e) => e.id === id));
  };
}, []);

answered Sep 24, 2021 at 14:34

Seba99

1,3391 gold badge17 silver badges45 bronze badges

1 Comment

C.G. Over a year ago

if I use your second option (which I would prefer), the setState after the useEffect ist undefined... I dont understand what I am doing wrong

Jack el Antidoto · Accepted Answer · 2021-09-27 14:50:52Z

0

Gabriel Furlan gave a great solution. I would use the async declaration at the top level of the useEffect hook. Ex.

const [article, setArticle] = useState();
const [cart, setCart] = useState([]);
const { id } = useParams();

useEffect(async () => {
  const sess = await ApiClientShoppingCart.getCart();
  setCart(sess.cart);
}, []);

useEffect(() => {
  setArticle(cart.filter((e) => e.id === id));
}, [cart]);

return (
  <div>
    {console.log(cart.filter((e) => e.id === id))}
    {console.log(article)}
  </div>
);

answered Sep 27, 2021 at 14:50

Jack el Antidoto

266 bronze badges

Collectives™ on Stack Overflow

React useEffect does not fetch paramter into React useState

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related