React钩子：使用USESTEAT更新状态不会立即更新状态[重复]

Question

它几乎添加了一个对象，该对象包含来自主窗体的子窗体的值。

const addNode = () => {
    let p_form = pForm
    let ha = [vForm, yForm, hForm]
    let info = [....]
    setCurrentNodeForm(
        {
            ...currentNodeForm,
            p: p_form,
            ha: ha,
            info: info,
        }
    )
    // inserts this form to a state called `addedNodes`
    let currArr = [...addedNodes]
    currArr.push(currentNodeForm)
    setAddedNodes(currArr)
    intializeForms()
}

这是我用作Add按钮的onclick函数的函数。

这将一个新对象添加到一个名为addednodes的状态，该状态是一个对象数组。

const submitMainForm = () => {
    let credentials = [...]
    let nodes = [...addedNodes]
    setMainForm(
        {
            ...currentMainForm,
            credentials: credentials,
            nodes: nodes,
        }
    )

    let body = {
        name: .... // something
        objects: currentMainForm,
    }

    intializeForms()

    let options = {
        headers: header,
        method: 'post',
        mode: 'cors',
        body: JSON.stringify(body),
    }

    console.log('options.body', options.body)

    return new Promise((resolve, reject) => {
        fetch(endpoint, options)
            .then(res => res.json())
            .then(resText => {
                console.log('resText', resText)
            })
    }).catch(err => {
        console.log(err)
    })
}

提前谢了。

Answer 1

在React Hook中执行副作用。如果它是功能性组件，那么在useEffect钩子中添加api调用。

setmainform是一个异步函数，因为它具有async的特性，所以在body中没有数据。

您可以做的是，更新提交函数中的状态，并使用useEffect钩子来监听CurrentMainForm状态的更改并提交数据。

useEffect( () => {
  fetchData();
}, [currentMainForm]);

const submitMainForm = () => {
  let credentials = [...]
  let nodes = [...addedNodes]
  setMainForm( prevState => {
    return  {
      ...currentMainForm,
      credentials: credentials,
      nodes: nodes,
    }
  });
}

function fetchData() {
  let body = {
    name: '....', // something
    objects: currentMainForm,
  }

  intializeForms()

  let options = {
      headers: header,
      method: 'post',
      mode: 'cors',
      body: JSON.stringify(body),
  }

  console.log('options.body', options.body)

  return new Promise((resolve, reject) => {
      fetch(endpoint, options)
          .then(res => res.json())
          .then(resText => {
              console.log('resText', resText)
          })
  }).catch(err => {
      console.log(err)
  })
}