0

I am currently using polaris components to build a shopify app. Essentially I want to update a field based on a previous value. I have a connection to Google Firebase which a textbox is set to, and then you are able to edit the text box - so the initial state of the text is what is in the DB. Then you press submit and update the db.

The update is fine and I can get data from the database and load it into the box but when I do so, any time that I use what was retrieved by setting the textbox to the data ( with setEmail(loadedEmail); ) I cannot edit the box. Whenever I delete, type, paste or whatever it reverts back to the form found in the database after a split second. It is as if each time I type into the box, it re-loads the database and whatever it was initially cannot be changed.

This has completely stumped me. This is the current state of the code - to the top is where I think the problem is, and with the 'setEmail' part:

export default function FormOnSubmitExample() {
  let loadedEmail = "Enter Email"; //this is only seen if the database cannot find records (becuase it is the first time they have seen the screen)

  const db = firebase.firestore();  
  const docRef = db.collection('example').doc('testuser1');
  docRef.get().then(function(doc) {
    if (doc.exists) {
      console.log("Document data:", doc.data().email);

      loadedEmail = doc.data().email; // set the inital textbox to this (but does not work - "Enter Email" from the declaration is seen in the textbox instead, not whatever this is as if it has not worked.)

      setEmail(loadedEmail); // When this is not commented out, I cannot edit the textbox and the data from the database cannot be found. Without this command, despite the 'state' variable being set to the same data, the textbox will not update.

    } else {
      console.log("No such document!");
    }
  }).catch(function(error) {
    console.log("Error getting document:", error);
  });



  const [email, setEmail] = useState(loadedEmail); // originally just '' as a blank field, so now holds the variable which was entered previously and now stored in db but only if 'setEmail' is used at the top

  let updater = email; // this is used because I cannot pass 'email' from the textbox into function otherwise
  const handleSubmit = useCallback((_event) => {
    setEmail('');
    const db = firebase.firestore();

      db.collection('example').doc('testuser1').update({
        email: updater  // this is used because I cannot pass 'email' from the textbox into function otherwise
      })
      .then(() => alert("Updated Database"))
      .catch(() => alert('Something Went wrong'))
  }, []);
    
  const handleEmailChange = useCallback((value) => setEmail(value), []);

  return (
    <Form onSubmit={handleSubmit}>
      <FormLayout>

        <TextField
          value={email}
          onChange={handleEmailChange}
          label="Email"
          type="email"
          helpText={
            <span>
              We’ll use this email address to inform you on future changes to
              Polaris.
            </span>
          }
        />

        <Button submit>Submit</Button>
      </FormLayout>
    </Form>
  );
}

I am completely stumped. I am quite new to React but I have quite a few years programming experience in other languages and so I am confused as to why the variable is not updating, but it may be because I am missing something obvious! My guess is that when 'setEmail' is not used, it loads the textbox first and so does alter the display once it has been updated once - allowing me to edit it but not display the db info. When 'setEmail' is used, it updates many times preventing me from changing it, or, for whatever reason, will not let me edit it.

I think it is somehow related to this answer/question -> https://stackoverflow.com/a/55266240/13964958

It's so annoying feeling like I am almost there but I can't both edit it and have the data!

NewAppDeveloper
  • 53
  • 2
  • 8

1 Answers1

0

I believe the issue here is that you have your call to the DB in the component which is being called every time a re-render happens. So this is happening:

  1. User changes textarea (handleEmailChange is called)
  2. State is updated, triggering a re-render (due to setEmail(value) )
  3. All your code is run again (including the db call)
  4. Inside the db call you use setEmail again which sets the textarea back to what is inside the DB

So what you could do here is use the useEffect hook and only run on mount to get the initial value.

useEffect(() => { db call }, [])

The empty array at the end lets react know you only want this to run when the component is initially rendered.

Here is a really simple codepen showing what I mean: https://codepen.io/serp002/pen/mdPgYma

You can see that everytime you type something the console log appears, and in your case this is actually a function that is resetting the state back to the value in the DB.

If you throw a console log into your db call, you should be able to see it being called everytime you change the value in the textarea.

serp002
  • 85
  • 8