React - 导航提示 onConfirm 立即被触发

Question

我有一个问题，我需要在用户尝试重新路由（有效）时显示导航提示。但是 onConfirm 函数在我点击“确认”按钮之前立即被调用。我想setReload(true)在用户按下“确认”按钮后。

<NavigationPrompt onConfirm={setReload(true)} when={myExampleFunction}>
                    {({ onConfirm, onCancel }) => (
                        <React.Fragment>
                            <Modal
                                ariaHideApp={false}
                                style={customStyles}
                                isOpen={true}
                            > You are about to lose all the data
            <button onClick={onCancel}>Cancel</button>
                                <button onClick={onConfirm}>Confirm</button>
                            </Modal>
                        </React.Fragment>
                    )}
                </NavigationPrompt>

Answer 1

问题是您在装载时使用 setReload(true) 调用 setReload。

您需要传递一个函数，而不是在那里调用它：

onConfirm={() => setReload(true)} // A new function to be called onConfirm

React - 导航提示 onConfirm 立即被触发

React - Navigation Prompt onConfirm gets triggered straight away

javascript

reactjs

react-router

react-props