处理表单清除并在成功提交时提交消息 - React答案

【问题标题】：Handling form clear and submit message on successful submission - React处理表单清除并在成功提交时提交消息 - React
【发布时间】：2021-05-21 23:28:56
【问题描述】：

我正在尝试在我的表单提交方法中添加几行，以处理表单组件在提交时使用初始状态值重新呈现。我有它，以便我能够正确发布，但是当它提交时，无法判断它是否已正确提交并且表单中的数据保持不变。

有没有比我在下面尝试的方法更简单的方法？我只想在成功保存后重定向到新组件。

获取成功消息是否包括以某种方式处理来自后端 API 的“res.send(200)”消息？

const DiveLogForm = (props) => {

....

        // state for the current field value
        const [dive, setDive] = useState({
            diveTypeID: ``,
            diveSchoolID: ``,
            currentID: ``,
            visibilityID: ``,
            diveDate: ``,
            diveMaxDepth: ``,
            userID: props.user.userID,
            diveVerifiedBySchool: false,
            diveNotes: ``,
            diveSpotID: ``,
            redirectToForm: false,
            error: '',
            id: ''
        });

        .....

        const jwt = auth.isAuthenticated()

        ...

        function handleSubmitDive(e: React.FormEvent<HTMLFormElement>) {
            e.preventDefault();
            const formData = new FormData();
            formData.append("diveTypeID", dive.diveTypeID);
            formData.append("diveSchoolID", dive.diveSchoolID);
            formData.append("currentID", dive.currentID);
            formData.append("visibilityID", dive.visibilityID);
            formData.append("diveDate", dive.diveDate);
            formData.append("diveMaxDepth", dive.diveMaxDepth);
            formData.append("userID", dive.userID);
            formData.append("diveVerifiedBySchool", dive.diveVerifiedBySchool);
            formData.append("diveNotes", dive.diveNotes);
            formData.append("diveSpotID", dive.diveSpotID);
            formData.append("photos", photos);
            const config = {
                headers: {
                    'content-type': 'multipart/form-data'
                }
            };
            axios.post("http://localhost:5002/api/divelog/createdivelog", jwt.token, formData, config)
            .then((data) => {
            if (data && data.error) {
                setDive({...dive, error: data.error})
            } else {
                setDive({...dive, 'redirectToForm': true})
            }
        })
        }

【问题讨论】：

标签： reactjs multipartform-data

【解决方案1】：

// Make sure you declare this outside the component . 
const initialValue = {
            diveTypeID: ``,
            diveSchoolID: ``,
            currentID: ``,
            visibilityID: ``,
            diveDate: ``,
            diveMaxDepth: ``,
            userID: props.user.userID,
            diveVerifiedBySchool: false,
            diveNotes: ``,
            diveSpotID: ``,
            redirectToForm: false,
            error: '',
            id: ''
        }

// Now in the state when initializing you can do this 
const [ dive, setDive ] = useState(initialValue);

// In your handle submit when the request is successfull inside your then 
setDive(initialValue);

【讨论】：