Kevin Powell - Community•4w ago

React useEffect problem

~ useEffect(() => { const fetchPins = async () => { setLoading(true); setError(null); try { let query; if (text === "created") { console.log("Running userCreatedPinsQuery"); query = userCreatedPinsQuery(userId); } else { console.log("Running userSavedPinsQuery"); query = userSavedPinsQuery(userId); } console.log("Generated query:", query); const data = await client.fetch(query); console.log("Fetched data:", data); setPins(data); } catch (err) { console.error("Error fetching pins:", err); setError(err); } finally { setLoading(false); } }; fetchPins(); console.log(Fetching pins for text: ${text} and userId: ${userId}); }, [text, userId]); ~ i am working with sanity and i want to change the pins displayed when the text changes. problem is the text does change from created to save and runs the code as expected but when i change it back to created, it still runs the code with savedQuery not the createdQuery

12 Replies

glutonium•4w ago

send in codeblocks

useEffect(() => {
    const fetchPins = async () => {
      setLoading(true);
      setError(null);

      try {
        let query;

        if (text === "created") {
          console.log("Running userCreatedPinsQuery");
          query = userCreatedPinsQuery(userId);
        } else {
          console.log("Running userSavedPinsQuery");
          query = userSavedPinsQuery(userId);
        }

        console.log("Generated query:", query);

        const data = await client.fetch(query);

        console.log("Fetched data:", data);

        setPins(data);
      } catch (err) {
        console.error("Error fetching pins:", err);
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchPins();
    console.log(Fetching pins for text: ${text} and userId: ${userId});
  }, [text, userId]);

useEffect(() => {
    const fetchPins = async () => {
      setLoading(true);
      setError(null);

      try {
        let query;

        if (text === "created") {
          console.log("Running userCreatedPinsQuery");
          query = userCreatedPinsQuery(userId);
        } else {
          console.log("Running userSavedPinsQuery");
          query = userSavedPinsQuery(userId);
        }

        console.log("Generated query:", query);

        const data = await client.fetch(query);

        console.log("Fetched data:", data);

        setPins(data);
      } catch (err) {
        console.error("Error fetching pins:", err);
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchPins();
    console.log(Fetching pins for text: ${text} and userId: ${userId});
  }, [text, userId]);

Judy•4w ago

You mean i should send it in this form. Or just pictures or how?

Jochem•4w ago

there's instructions on how to use codeblocks in #how-to-ask-good-questions

Judy•4w ago

 useEffect(() => {
    const fetchPins = async () => {
      setLoading(true);
      setError(null);

      try {
        let query;

        if (text === "created") {
          console.log("Running userCreatedPinsQuery");
          query = userCreatedPinsQuery(userId);
        } else {
          console.log("Running userSavedPinsQuery");
          query = userSavedPinsQuery(userId);
        }

        console.log("Generated query:", query);

        const data = await client.fetch(query);

        console.log("Fetched data:", data);

        setPins(data);
      } catch (err) {
        console.error("Error fetching pins:", err);
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchPins();
    console.log(`Fetching pins for text: ${text} and userId: ${userId}`);
  }, [text, userId]);

 useEffect(() => {
    const fetchPins = async () => {
      setLoading(true);
      setError(null);

      try {
        let query;

        if (text === "created") {
          console.log("Running userCreatedPinsQuery");
          query = userCreatedPinsQuery(userId);
        } else {
          console.log("Running userSavedPinsQuery");
          query = userSavedPinsQuery(userId);
        }

        console.log("Generated query:", query);

        const data = await client.fetch(query);

        console.log("Fetched data:", data);

        setPins(data);
      } catch (err) {
        console.error("Error fetching pins:", err);
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchPins();
    console.log(`Fetching pins for text: ${text} and userId: ${userId}`);
  }, [text, userId]);

Jochem•4w ago

please don't send screenshots though

Judy•4w ago

Is this better?

Jochem•4w ago

you can get syntax highlighting if you use ```js intead of just ```, but yes! no idea how to answer your question though, sorry

Judy•4w ago

ok No problem. Atleast i learnt how to use code blocks😊

Aoi•4w ago

Can you send the rest of the code for the component? Also just try adding

console.log(text === "created", text)

console.log(text === "created", text)

Before the if statement. (Or you can use the web debugger if you know how to)

Judy•4w ago

~~~

Judy•4w ago

message.txt

Judy•4w ago

This is what the entire component looks like I found the problem. LOL silly me used an uppercase in the wrong place. 🤣🤣🤣🤣🤣🤣🤣🤣🤣

Gaming

Programming

React useEffect problem