Предупреждать пользователя перед тем, как покинуть страницу после ввода некоторых данных (особенно в ReactJS)

when должно быть истинным, если вы хотите прервать навигацию.

Я бы переименовал вашу переменную во что-то вроде isDirty, инициализировав ее как false. Я обнаружил, что с тех пор, как я начал называть свои логические флаги таким образом, мой разум должен делать немного меньше работы, чтобы понять, для чего он может использоваться.

Переверните его на true, когда в значения формы будет внесено первое изменение. Может быть просто useEffect с formData в качестве зависимости? Убедитесь, что он еще не перевернут, чтобы предотвратить ненужные рендеры.

Верните его обратно в false, когда вы получите 200 от своего представления, чтобы разрешить последующую навигацию.

Я не думаю, что React будет повторно отображать до того, как подсказка будет запущена в вашем текущем onSubmit, поэтому вам может потребоваться найти способ навигации после проверки отправки.

Другой флаг, такой как didSubmit, позволит вам отобразить путь кода для рендеринга <Redirect> вместо вызова navigation.push(), если это подходит.

Но в противном случае, используя ваши текущие настройки, вы можете разрешить навигацию, когда вы попадете на новую форму (ваш пользователь еще не приложил никаких усилий), навигация будет прервана, если форма «грязная», и навигация будет происходить автоматически на следующий рендер после установки didSubmit.

const [isDirty, setIsDirty] = React.useState(false)
const [didSubmit, setDidSubmit] = React.useState(false)
const onSubmit = async (formData) => {
  try {
    await axios.post('url', formData)
    setIsDirty(false)
    setDidSubmit(true)
  } catch (error) {
    // handle your errors
  }
}
React.useEffect(() => {
  if(!isDirty) setIsDirty(true)
}, [formData])
React.useEffect(() => {
  if(didSubmit) navigation.push({ ... })
}, [didSubmit]

return (
  // the form...
  <Prompt when={isDirty} {...} />
)

Я обновил состояние isDirty или leave до истинного при изменении поля ввода формы, как показано ниже.

render (
<Form onSubmit={handleSubmit(onSubmit)}>
   <Form.Row>
       <Form.Group as={Col} className="mr-5">
       <Form.Label column>Product Name</Form.Label>
       <Form.Control
            name="productName"
            placeholder="Enter product Name"
            required
            onChange={() => setIsDirty(true)} {/* I have updated here*/}
            ref={register}
            />
       </Form.Group>
   </Form.Row>
   <Button variant="success" type="submit" className="text-white mt-5">
            Add New Product
   </Button>
</Form>

<Prompt when={isDirty} message="Are you sure you want to leave ?" /> 
);

Теперь внутри функции onSubmit я обновил состояние isDirty до false перед переходом к месту назначения.

const onSubmit = (formData) => {
    axios.post("http://localhost:4000/products", formData);
    setIsDirty(false);   //here I am setting this true
    navigation.push({
        pathname: "/productList",
        state: { added: "pass" },
      });
};

Я хотел бы поделиться здесь важным моментом: всякий раз, когда происходит изменение ввода в любой момент, только состояние isDirty становится true, а во время отправки формы (все поля ввода заполнены) состояние изменяется на false, чтобы он мог перемещаться на другой URL.

В функциональном компоненте reactjs я использовал нижеприведенную вещь. это сработало для меня. В моем случае при выходе с текущей страницы я хочу удалить некоторые данные магазина. В этом случае я использовал нижеприведенную вещь.

useEffect(() => {
  return () => {
       // you can add your functionality here  
   };
 }, []);