Reach маршрутизатора refre sh страница

Question

Настройка : у меня есть форма, которая отправляет данные создателю действия, который, в свою очередь, отправляет API и получает результат. Я хочу, чтобы при успешной отправке формы обновлялась sh форма с пустыми входами.

Вот как выглядит компонент

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { addNewProduct } from "../../redux/actions";

class Admin extends Component {

    state = {
        ProductName: ""
    };

    onChange = e => {
        e.preventDefault()
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    handleProductSubmit = (event) => {
        event.preventDefault();
        this.props.addNewProduct(
            this.state.ProductName,
        );
    }

    render() {
        return (
            <div>
                {/* Form ends */}
                <form onSubmit={this.handleProductSubmit} autoComplete="off">

                        <input
                            type="text"
                            value={this.state.ProductName}
                            name="ProductName"
                            onChange={this.onChange}
                        />

                    <button type="submit" className="btn btn-dark">
                        Upload Product
                    </button>
                </form>
                {/* Form Ends */}

            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({ addNewProduct, createNewLogin }, dispatch);
};

export default connect(null, mapDispatchToProps)(Admin);

Это результат консоли .log (this.props)

location: Object { pathname: "/Home/admin", href: "http://localhost:3000/Home/admin", origin: "http://localhost:3000", … }
navigate: navigate(to, options)
​​
length: 2
​​
name: "navigate"
​​
prototype: Object { … }
​​
<prototype>: ()

Вот как выглядит actionCreator

export const addNewProduct = (ProductName, ProductCategory, ProductImg) => (dispatch) => {

    const productData = new FormData();
    productData.append("ProductName", ProductName)
    axios.post("http://localhost:4500/products/", productData,
        {
            headers: {
                "Content-Type": "multipart/form-data",
                "Authorization": localStorage.getItem("Authorization")
            }
        })
        .then(res => {
            console.log(res.data)
            setTimeout(() => {
                console.log("doing the timeout")
                navigate("/Home/admin")}, 1500);

        })
        .catch(err =>
            console.log(`The error we're getting from the backend--->${err}`))
};

Текущее поведение

Когда я отправляю форма и API возвращают 201, страница не обновляется sh, а входные данные не go пустые

Ожидаемое поведение :

Когда я получаю 201 из API, страница должна содержать sh, а поля ввода должны быть пустыми.

Пожалуйста, помогите мне, как этого добиться.

Answer 1

Использование навигации для перемещения того же URL-адреса или страницы не приведет к повторному подключению страницы и сбросу значений полей.

Лучше, если вы действительно вернете обещание от создателя действия и сами сбросите состояние

export const addNewProduct = (ProductName, ProductCategory, ProductImg) => (dispatch) => {

    const productData = new FormData();
    productData.append("ProductName", ProductName)
    return axios.post("http://localhost:4500/products/", productData,
        {
            headers: {
                "Content-Type": "multipart/form-data",
                "Authorization": localStorage.getItem("Authorization")
            }
        })
        .then(res => {
            console.log(res.data)   
        })
        .catch(err =>
            console.log(`The error we're getting from the backend--->${err}`))
};

---

В компоненте

handleProductSubmit = (event) => {
    event.preventDefault();
    this.props.addNewProduct(
        this.state.ProductName,
    ).then(() => {
        this.setState({ProductName: ""})
    });
}