reactjs - useEffect 中的执行顺序：从 API 获取数据，然后更新父组件

Question

由于路由，我需要使用带钩子的无状态组件。不幸的是，我的执行顺序有问题。

我希望子组件（NewComment）调用 API（将评论发送到数据库），并且在这样做之后父组件应该重新加载（NewComment 组件应该从父组件触发forceReload钩子）。重新加载后，我们应该会看到新的评论。

但是，我无法在 useEffect 挂钩中强制执行顺序。我的目标是在成功将评论发送到数据库后触发钩子。发送评论后后端报告 200 OK 状态码。

发送评论可以正常工作，如果我在获取请求后手动调用 forceReload 也可以。

使用效果：

    export const NewComment = ({ articleID, commentID, forceReload, reload }) => {
      const formRef = useRef(null);
      var isAutoFocus = commentID ? true : false;
    
      const submitComment = async () => {
                  obj...
        };
    
        const requestOptions = {
             ...they work
        };
    
        await fetch('/submit-comment', requestOptions);
      };
    
      useEffect(() => {
        const listener = (event) => {
          if (
            event.keyCode === 13
          ) {
            submitComment().then(forceReload(reload + 1)) // Here I want to submitComment, wait for it successful resolve and only then forceReload should be invoked
          }
        };
        document.addEventListener('keydown', listener);
        return () => {
          document.removeEventListener('keydown', listener);
        };
      }, []);

标签： reactjsreact-hooksuse-effect