由于路由,我需要使用带有钩子的无状态组件。不幸的是,我在执行顺序方面遇到了问题。
我希望子组件 (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);
};
}, []);