我正在使用 Hook 在我的应用程序中获取数据。钩子(Hook)看起来像这样:
const initialState = {
response: null,
loading: true,
error: null
}
const useGetFetch(url, token, user, parser) => {
const [state, dispatch] = useReducer(fetchReducer, initialState)
useEffect (() => {
if(user){
fetch(...)
.then((data)=> data.json())
.then(dispatch(...)) // setting the state here
.catch((error) => dispatch(...)) // set error state
}
}, [user])
return [state.response, state.loading, state.error]
}
具体来说,我在表单组件中使用这个钩子(Hook)来获取一些数据以用作选择元素中的选项。
但是,我需要能够让用户即时添加新选项。为此,我在选择元素旁边创建了一个按钮。如果用户按下此按钮,将弹出一个模态框,其中包含另一个表单,可以创建一个新选项。这个新选项通过 post 请求发送到服务器,如果成功,模式关闭。
我面临的问题是,在模式关闭后,我无法更新使用自定义数据获取 Hook 获取的初始数据,除非我刷新页面。有没有办法在不触发页面刷新的情况下以某种方式实现这一点?
我最初的预感是使用回调函数并将其传递给 useGetFetch
并将其绑定(bind)到 useEffect
钩。然后我可以将它传递给模式中的表单并在成功提交后调用该函数,但这没有用。
我正在寻找的另一个选项是 useCallback
hook,但我目前对它的理解还不够好,不知道它是否有帮助。
编辑
具体来说,我所做的是在父组件之外创建一个触发器函数:
const trigger = () => console.log("click")
将它绑定(bind)到获取钩子(Hook)上:
const useGetFetch(url, token, user, parser, trigger) => {
const [state, dispatch] = useReducer(fetchReducer, initialState)
useEffect (() => {
if(user){
fetch(...)
.then((data)=> data.json())
.then(dispatch(...)) // setting the state here
.catch((error) => dispatch(...)) // set error state
}
}, [user, trigger])
return [state.response, state.loading, state.error]
}
并在父组件内部传递给子组件:
const trigger = () => console.log("click")
const Parent = () => {
// load a bunch of stuff
// ...
const { show, toggle } = useModal()
const [optionsData, Loading, Error] = useGetFetch(
optionsUrl,
token,
user,
parser,
trigger
)
// ...
return (
<div>
{// ...}
<button
onClick={(e) => {
e.preventDefault()
toggle()
}}
>
Add
</button>
<Modal show={show} toggle={toggle}>
<ModalForm
show={show}
toggle={toggle}
trigger={trigger}
></ModalForm>
</Modal>
{// ...}
<div>
)
}
内部ModalForm
在执行成功的发布请求后调用触发器。关闭模态后,数据不会更新。我的猜测是在 ModalForm
中调用触发器会触发 useEffect
在useGetFetch
里面但它似乎并不像那样工作。
最佳答案
如果清楚地理解您的问题,我认为您正在尝试做的是在用户关闭模式时强制重新获取。
您可以通过在 useGetFetch
钩子(Hook)中触发强制重新渲染来做到这一点,如下所示:
const useGetFetch(url, token, user, parser) => {
const [state, dispatch] = useReducer(fetchReducer, initialState)
// calling refetch will force a rerender on the hook
const [shouldRefetch, refetch] = useState({});
useEffect (() => {
if(user){
fetch(...)
.then((data)=> data.json())
.then(dispatch(...)) // setting the state here
.catch((error) => dispatch(...)) // set error state
}
}, [user, shouldRefetch]); // note the dep array
// returning the refetch functions so we can call the refetch() on modal close.
return [state.response, state.loading, state.error, refetch];
}
这就是 useGetFetch,现在您将像这样使用钩子(Hook):-
const Parent = () => {
const { show, toggle } = useModal();
// notice the refetch method
const [optionsData, Loading, Error, refetch] = useGetFetch(
optionsUrl,
token,
user,
parser
);
return (
<div>
<button
onClick={e => {
e.preventDefault();
toggle();
}}
>
Add
</button>
<Modal show={show} toggle={toggle}>
<ModalForm
show={show}
toggle={toggle}
trigger={() => {
// probably onClose would be better name instead of `trigger`
// calling the refetch method with empty object, this will cause rerender
refetch({});
}}
></ModalForm>
</Modal>
</div>
);
};
关于javascript - 关闭模式后刷新使用自定义 Hook 获取的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62554629/