反應提交表單后如何呈現數據

Question

任何人都知道如何在不刷新頁面的情況下正確發送我的表單。 所有數據都保存在數據庫中，但發送后不渲染

submitHandler = (e) => {
        e.preventDefault();
        const form = document.forms[0];
        console.log(this.state);
        axios.post('/api/departments', this.state)
            .then(response => {
                const{departments} = this.state;
                console.log(response);
                this.setState({departments});
                form.reset();
            })
            .catch(error => {
                console.log(error)
            })
    };

也許這里也有問題

Answer 1

我假設您在收到響應時嘗試設置部門屬性，但實際上您從未這樣做過。 您只是調用部門屬性，然后控制台記錄響應，然后將部門屬性設置為相同的舊值。 你需要這樣做：

submitHandler = (e) => {
        e.preventDefault();
        const form = document.forms[0];
        axios.post('/api/departments', this.state)
            .then(response => {
                this.setState({departments: response}, () => {
                    form.reset();
                });
            })
            .catch(error => {
                console.log(error)
            })
    };

如果響應具有部門的新值，則此示例將起作用。 我只是想假設你想做什么，但你明白了。 您從未真正更新過您的應用程序的 state。