Question

我正在使用HashRouter在React上制作应用。在应用程序中，我有一个带输入的表单，在用户提交数据后，一些数据显示在URL中：

http://localhost:3000/?State=Alabama#/profile

当它应该只是

时

提交按钮上的功能只是获取所有值并发送到数据库：

    handleSubmit() {
        const { userUrl } = this.props;
        let { street_address, state, city, zip, email, phone, avatar, about_message, proximity } = this.state;

        if (this.props.user.title === 'caregiver') {
            axios.put('/update/profile', {
                street_address,
                state,
                city,
                zip,
                email,
                phone,
                avatar: userUrl.length ? userUrl : avatar,
                about_message,
                proximity
            })
                .then(response => {
                    console.log(response);
                    this.setState({
                        street_address,
                        state,
                        city,
                        zip,
                        email,
                        phone,
                        avatar,
                        about_message,
                        proximity
                    })
                })
                .catch(error => console.log(error))
        }
    }

我发现问题部分存在于表单中，因为某些输入的名称=＆＃34;＆＃34;属性，如果我把它拿出来，它就不会显示在URL中。但问号仍在出现。

Answer 1

您需要阻止表单进行默认提交：

handleSubmit(e) {
        e.preventDefault()
        const { userUrl } = this.props;
        let { street_address, state, city, zip, email, phone, avatar, about_message, proximity } = this.state;

        if (this.props.user.title === 'caregiver') {
            axios.put('/update/profile', {
                street_address,
                state,
                city,
                zip,
                email,
                phone,
                avatar: userUrl.length ? userUrl : avatar,
                about_message,
                proximity
            })
                .then(response => {
                    console.log(response);
                    this.setState({
                        street_address,
                        state,
                        city,
                        zip,
                        email,
                        phone,
                        avatar,
                        about_message,
                        proximity
                    })
                })
                .catch(error => console.log(error))
        }
    }

出现在网址中的查询起反应

1 个答案: