Почему мои данные добавляются к моему URL-адресу после редактирования элемента? - PullRequest
Новая
       7

Почему мои данные добавляются к моему URL-адресу после редактирования элемента?

0 голосов
/ 05 мая 2020

Я создаю простое приложение для сбора рецептов и сталкиваюсь с действительно странным сценарием, когда, когда я редактирую элемент рецепта, новые данные добавляются к моему локальному хосту: 3000 / url. Например, мои исходные данные рецепта были:

«Название: тест», «Ингредиенты: тест», «Рекомендации по приготовлению: тест»

Но затем, после того как я отредактировал данные, появились новые данные также добавлен к моему локальному хосту: 3000 / url. данные, добавленные к скриншоту URL localhost . Моя цель - не добавлять эти данные к моему URL и оставаться на localhost: 3000. Спасибо, и любая помощь будет принята с благодарностью.

Вот мой код запроса на размещение: 

updateRecipe = (e) => {
    console.log(this.props.uniqueID);
    const recipe = {
      title: this.state.title,
      ingredients: this.state.ingredients,
      summary: this.state.summary
    }

    const url = `http://localhost:5000/recipes/${this.props.uniqueID}`;
    axios.put(url, recipe)
      .then(res => this.setState({
        recipes: [...this.state.recipes, res.data],
      },
        () => console.log('recipe edited: ', res.data)
      ));
  }

<form className="form-container" onSubmit={this.updateRecipe}>
            <TextField
              style={inputStyle}
              className="form-input-title"
              type="text"
              onChange={this.onChangeHandler}
              name="title"
              id="standard-basic"
              label="Title"
              value={this.state.title}
            />
            <TextField
              style={inputStyle}
              className="form-input-ingredients"
              type="text"
              onChange={this.onChangeHandler}
              name="ingredients"
              id="standard-basic"
              label="Ingredients"
              value={this.state.ingredients}
            />
            <TextField
              id="outlined-multiline-static"
              label="Directions"
              multiline
              rows={6}
              variant="outlined"
              onChange={this.onChangeHandler}
              name="summary"
              className="form-input-directions"
              style={inputStyle}
              value={this.state.summary}
            />
            <Fab style={style} className="add-recipe-button" color="primary" aria-label="add" type="submit">
              <AddIcon />
            </Fab>
 </form>

1 Ответ

0 голосов
/ 05 мая 2020

Это поведение по умолчанию, если вы используете обработчик onSubmit для формы. Если это не то, что вы ищете, не используйте обработчик onSubmit в форме, вместо этого используйте обработчик onClick для кнопки отправки для вызова функциональности updateRecipe. Тогда URL-адрес не изменен.

...