CODEWITHSUNDEEP
reactjsecmascript-6react-hooks
Dycey
Dycey

Reputation: 4685

Why does 'useState()' appear not to be working?

I have some object properties that I need to generate dynamically. (The object is the initialValues object for a Formik component.)

When I try to update the formValues inside a useEffect() call, they don't appear to stick.

useEffect(() => {
    async function getRoles() {
      let res

      try {
        res = await fetch(`http://localhost/roles?active=Yes`)
      } catch (err) {
        console.log('Err in getRoles', JSON.stringify(err))
      }
      const { rows } = await res.json()

      console.log('rows: ' + JSON.stringify(rows))
      setRoles(rows)

      const possibleRoles = {}
      rows.forEach((role, index) => {
        const key = role.code.toLowerCase()
        possibleRoles[key + '_reviewer'] = ''
      })

      console.log('formValues before: ' + JSON.stringify(formValues))
      console.log('possibleRoles: ' + JSON.stringify(possibleRoles))

      const newValues = { ...possibleRoles, ...formValues }
      console.log('newValues: ' + JSON.stringify(newValues))

      setFormValues({ ...newValues })
      console.log('formValues after: ' + JSON.stringify(formValues))

    }

    getRoles()

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []
)

// console results:
rows: [{"code":"aaa"},{"code":"bbb"},{"code":"ccc"}]
formValues before: {"formChoice":"","sectionChoices":[],"requestor":"dd","materials":""}
possibleRoles: {"aaa_reviewer":"","bbb_reviewer":"","ccc_reviewer":""}
newValues: {"aaa_reviewer":"","bbb_reviewer":"","ccc_reviewer":"","formChoice":"","sectionChoices":[],"requestor":"dd","materials":""}
formValues after: {"formChoice":"","sectionChoices":[],"requestor":"dd","materials":""}

What am I doing wrong? Is it my destructuring?

Upvotes: 0

Views: 66

Answers (1)

Guruprasad
Guruprasad

Reputation: 783

Try using useEffect some thing like this.

This will be on initial render

const [roles, setRoles] = useState([]);

 useEffect(() => {
   async function getRoles() {
      let res

      try {
        res = await fetch(`http://localhost/roles?active=Yes`)
      } catch (err) {
        console.log('Err in getRoles', JSON.stringify(err))
      }
      const { rows } = await res.json()

      console.log('rows: ' + JSON.stringify(rows))
      setRoles(rows)
     }
  }, []);

now just watch the changes in the state roles in another useEffect block

useEffect(() => {
    const possibleRoles = {}
      roles.forEach((role, index) => {
        const key = role.code.toLowerCase()
        possibleRoles[key + '_reviewer'] = ''
      })


      console.log('formValues before: ' + JSON.stringify(formValues))
      console.log('possibleRoles: ' + JSON.stringify(possibleRoles))

      const newValues = { ...possibleRoles, ...formValues }
      console.log('newValues: ' + JSON.stringify(newValues))

      setFormValues({ ...newValues })
      console.log('formValues after: ' + JSON.stringify(formValues))

  }, [roles]);

Upvotes: 1

Related Questions