在reactjs中从服务器获取数据

我有一个应用程序，我想根据服务器上的数据实现不同类型的消息

const submit = () => {
  setSubmit(true);
  dispatch(data)
}

这是我的状态，检查用户是否单击了提交：

const [submit, setSubmit] = useState(false);

我从服务器获取与获取数据相关的消息：

 const isCreated = selector.createReducer.createSuccess;
 const isError = selector.createReducer.error.message;

以及my

useEffect

，它将根据用户调用消息：

useEffect(()=> {
    if (submit) {
       if (isCreated) {
         seSubmit(false)
         message.success({ content: 'success'});
       }
        if (isError) {
          isSubmit(false)
          message.error({ content: isError});
        }
    }
  },[isCreated, submit, isError])

下一个问题是： 当

submit

为true时，我想从

useffect

触发这些消息，这取决于来自服务器的消息调用一条消息或另一条消息，但现在当我获得useffect中的消息时，我得到如下结果：

submit===true  isError="message error"  isCreated=false
second render in useEffect
submit===false  isError="message error"  isCreated=false
third render in useEffect
submit===false  isError=undefined  isCreated=null
forth render in useEffect
submit===false  isError=undefined  isCreated=true

因此，我延迟获得所需的数据，您可以看到：

forth render in use effect submit===false iError=undefined isCreated=true

在我获得第三次渲染之前，将触发第一次渲染

submit==true-isError=“message error”isCreated=false

，如果第四次渲染成功，我将获得错误消息事件。

---

问题：如何为消息创建rght条件？我应该创建哪些新条件以获得正确的结果？

尝试在

useffect

中处理

fetch

调用，如下所示：-

在您的

上下文

或

还原程序

---

只有当

submit

等于

true

时，才应运行

useffect

，对吗？如果是，请尝试在

useffect

@lala中仅使用

submit

，现在我也在useffect中使用submit。这似乎应该由服务器的逻辑而不是客户端来处理。我计算了

submit

功能触发的时间。当您使用

dispatch（data）

更新您的

状态时。这些数据被更新（延迟）到您的
isCreated
和
isError
状态。我说得对吗？在设置
setSubmit（true）
const [isCreated, setIsCreated] = useState(false)
const [isError, setIsError] = useState('')

// handle submission to server
useEffect(() => {
  (async() => {
   // should be async since fetching response from server
    if(submit) {
      // do fetch data or call action/function that handle fetching of data
      await dispatch(data)
    }
  })()  
}, [submit])

// handle isCreated
const isItCreated = (isCreated) => {
  if(isCreated) {
    message.success({ content: 'success'});
    return true
  } else return false
}

// handle isError
const isItError = (isError) => {
  if(isError) {
    message.error({ content: isError})
    return true
  } else return false
}

return (
  <>
  {isItCreated(isCreated) && 'doSomething'}
  {isItError(isError) && 'doSomething'}
  </>
)

// handle submission to server
useEffect(() => {
  (async() => {
   // should be async since fetching response from server
    if(submit) {
      // do fetch data or call action/function that handle fetching of data
      let {isCreated, isError} = await dispatch(data)

      if (isCreated) {
        message.success({ content: 'success'});
      }
      if (isError)
        message.error({ content: isError});
      }
      
      setIsSubmit(false)
    }
  })()  
}, [submit])