时间戳

首页 > 解决方案 > 第一次点击时反应钩子状态没有更新

reactjs - 第一次点击时反应钩子状态没有更新

问题描述

我是新手，我遇到了 useState 钩子的问题。我有一个来自（使用useForm），我想要实现的是当用户单击提交按钮时，它会将表单数据发送到api并从api收集响应然后更新状态并将更新的状态作为url重定向中的参数发送（道具。历史.push）。我唯一坚持的是我的 useState 钩子在第一次点击时没有更新。我发现了类似的问题，但这并没有解决我的问题，或者有人可以说我不太了解它，请帮忙。

import React, {useState, useRef, useCallback, useEffect} from 'react'
import {useForm} from 'react-hook-form'
import CreateProcessComponent from '../../components/ProcessComponents/CreateProcess/CreateProcessComponent.jsx'
import {createProcessApiCall} from '../../services/ProcessService'


function postData (dt, err, param){
     var new_param = JSON.stringify(param)
        const result = createProcessApiCall(new_param)
            .then(response => {
                dt(response.data.data)
                console.log(response.data.data)
          })
          .catch(e => {
            console.log(e)
            err(true)
          })
        }
      
    

export default function CreateProcessContainer(props){

    const {register, handleSubmit, errors} = useForm()
    const [postApiData, setApiData] = useState({})
    const [isError, setIsError] = useState(false);

  
  
    const sendRequest= (data) => {
      let prm = {"ProcessName":data.processName,"ProcessDescription":data.processDescription,"Code":"null", "CreatedBy":"null"}
      postData(setApiData, setIsError, prm)
      props.history.push({pathname:'/test',state:{postApiData}})
    }


  

    return (
          <main>
            {isError && <div>Something went wrong ...</div>}
            { (!isError)  ?
            <CreateProcessComponent 
                register={register} 
                handleSubmit={handleSubmit} 
                errors={errors}
                onSubmit={sendRequest}/>
                :
                null }

            </main>

    )
}

在上面的代码中 CreateProcessComponent 是我的表单。请让我知道我做错了什么以及我需要添加哪些修复

标签： reactjs

解决方案

尝试这个：

const main = useRef(null);

if(main) {}

<main ref={main}>

PS：没感觉

    // set isMounted to false when we unmount the component
    useEffect(() => {
      return () => {
        isMounted.current = false
      }
    }, [])

您的组件将销毁，为什么设置isMounted？

推荐阅读