Next.js Discord

Discord Forum

State not updating (app directory) - see comments for full post

Answered
Cordilleran Flycatcher posted this in #help-forum
Open in Discord
Cordilleran FlycatcherOP
I'm using Next.js with app directory.

I have this state - 

const[processing, setProcessing] = useState(false);

I have this if statement -
  if(processing) {
    console.log("In here")
      return (
          <Loading message = "Generating..." />
      );
  }

Whenever the processing state is set to true, this if statement should run. That is indeed the case when the function below executes.
Answered by Cordilleran Flycatcher
FOUND THE ISSUE - I needed to add await to the start of the fetch function
View full answer

5 Replies

Cordilleran FlycatcherOP
  const createStory = async () => {
    if(document.getElementById("synopsis-field").value == "")
      return;
    const tempPages = parseInt(document.getElementById("number-pages").value);
    const tempTitle = document.getElementById("story-title").value;
    setPages(parseInt(document.getElementById("number-pages").value));
    setTitle(document.getElementById("story-title").value);
    setProcessing(true);
    const data = {
      email:session.user.email,
      title: document.getElementById("story-title").value,
      pages: document.getElementById("number-pages").value,
      prompt: document.getElementById("synopsis-field").value
    }
    await fetch("http://localhost:3001/create-story", {
      method: "POST",
      headers:{
        "Content-Type":"application/json"
      },
      body: JSON.stringify(data)
    })
    .then((response) => {
      return response.json();
    })
    .then((json) => {
      setChat(json);
     console.log(json.text);
      if(json.text.includes("PAGE 1")) {
        setStep(1);
        let aiStory = json.text.split(/PAGE \d+/);
        if(tempTitle === "")  {
          console.log(title);
          console.log("IN")
          setTitle(aiStory[0].substring(aiStory[0].lastIndexOf(":") + 1, aiStory[0].indexOf("\n")));
          console.log("Title is " + title);
          }
        if(aiStory.length !== tempPages) {
          aiStory = aiStory.slice(1);
          }
        console.log(aiStory);
        setStory(aiStory);
      } else {
          setStoryError(json.text);
      }
    });
   setProcessing(false);
  }
However, when processing is set to true in the updateStory function below, the Loading statement is not rendered and displayed on screen. Why is that? The functions are near identical. 

  const updateStory = async () => {
    if(document.getElementById("update-text-field").value === "")
      return;
    setProcessing(true);
    setOpen(false);
    const data = {
      email:session.user.email,
      update: document.getElementById("update-text-field").value,
      chat:chat
    }
    fetch('http://localhost:3001/update-story', {
      method: "POST",
      headers:{
        "Content-Type":"application/json"
      },
      body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then((json) => {
      setChat(json);
     console.log(json.text);
      if(json.text.includes("PAGE 1")) {
        setStep(1);
        let aiStory = json.text.split(/PAGE \d+/);
        if(json.text.includes("TITLE")) {
          console.log(title);
          console.log("IN")
          const newTitle = aiStory[0].substring(aiStory[0].lastIndexOf(":") + 1, aiStory[0].indexOf("\n"));
          if(newTitle !== title) {
            setTitle(newTitle);
          }
        }
        if(aiStory.length !== pages) {
          if(aiStory[0].includes("TITLE")) {
            aiStory = aiStory.slice(1);
          }
          setPages(aiStory.length)
        }
        console.log(aiStory);
        setStory(aiStory);
      } else {
          setStoryError(text);
      }      
    })
    setProcessing(false);
  }
To be clear, the updateStory function is called from within a fragment. Not sure if that is the issue.
The story DOES update, I just don't see the Loading component while the updating is happening
Cordilleran FlycatcherOP
FOUND THE ISSUE - I needed to add await to the start of the fetch function
Answer