Элементы ввода формы возятся с URL-адресом страницы ответа

Question

ContactData. js

import React, { Component } from 'react';
import Button from '../../../components/UI/Button/Button';
import classes from './ContactData.module.css'
class ContactData extends Component {
    state = {
        name: '',
        age: '',
        address: {
            street: '',
            postalCode: ''
        }
    }

    orderHandler = () => {
        console.log(this.props.ingredients)
    }

    render() {
        console.log(this.props.ingredients);
        return (
            <div className={classes.ContactData}>
                <h4>Enter Your Contact Data</h4>
                <form>
                    <input type="text" name="name" placeholder="Your Name" />
                    <input type="email" name="email" placeholder="Your Mail" />
                    <input type="text" name="street" placeholder="Street" />
                    <input type="text" name="postal" placeholder="Postal Code" />
                    <Button btnType="Success" clicked={this.orderHandler}>ORDER</Button>
                </form>
            </div>
        );
    }
}

export default ContactData;

CheckOut. js

    import React from 'react';
import CheckoutSum from '../../components/Checkout/Checkout'
import { Route } from 'react-router-dom';
import ContactData from '../../container/Checkout/ContactData/ContactData'
class Checkout extends React.Component {
    state = {
        ingredients: {
            salad: 1,
            meat: 1,
            cheese: 1,
            bacon: 1
        }
    }

    componentDidMount() {
        const query = new URLSearchParams(this.props.location.search);
        const ingredients = {};
        for (let param of query.entries()) {
            ingredients[param[0]] = parseInt(param[1]);
        }
        // console.log(ingredients);
        this.setState({ ingredients: ingredients });

    }

    cancelHandle = () => {
        this.props.history.goBack();
    }

    continueHandle = () => {
        this.props.history.replace('/checkout/contact-data');
    }
    render() {
        console.log(this.props)
        console.log(this.state.ingredients)
        return (
            <div>
                <CheckoutSum
                    cancel={this.cancelHandle}
                    continue={this.continueHandle}
                    ingredients={this.state.ingredients}
                />
                <Route
                    path={this.props.match.path + '/contact-data'}
                    exact
                    render={() => (<ContactData ingredients={this.state.ingredients} />)} />
            </div>

        );
    }
}

export default Checkout; 

Проблема возникает, когда я нажимаю кнопку «Заказать» в компоненте CotanctData страница перезагружается, и по какой-то причине мой URL-адрес меняется на этот http://localhost: 3000 / checkout / contact-data? name = & email = & street = & postal = , а затем компонент Checkout отображается снова и для некоторых причина, по которой componentDidMount срабатывает дважды. Наконец-то я ожидал печати объекта ингредиентов.

Кроме того, я использую поисковый запрос в URL-адресе, чтобы изменить состояние компонента проверки

Полный проект At- https://github.com/aniket-hue/Burger-App-React/tree/Routes

Потерпите, пожалуйста, если вам не нравится вопрос, который я не знал, как его сформулировать.

Answer 1

Вам необходимо:

• Вызвать e.preventDefult() в событии отправки <form>.
• ИЛИ добавить <button type="button"> к вашей кнопке, чтобы это не было submit ваша форма.

Answer 2

Вы должны добавить preventDefault к вашему orderHandler методу, потому что, если кнопка в форме не имеет типа, тип автоматически submit, поэтому при каждом нажатии вы отправляете форму. Также вы можете добавить type="button" к вашей button внутренней форме.

orderHandler = e => {
    e.preventDefault();
    console.log(this.props.ingredients);
}