Блог

Главная - Вопросы по программированию - Как предотвратить повторное отображение useState и useLocation в поле ввода/текста в react js?

Как предотвратить повторное отображение useState и useLocation в поле ввода/текста в react js?

#javascript #reactjs #react-hooks #react-router

Вопрос:

Так что в основном моя проблема в том, что у меня есть две страницы/экрана (Основной и редактируемый). На Main странице, когда я нажимаю на элемент, он передает его на Edit страницу с помощью useHistory крючков из react-router-dom пакета. На Edit странице я получаю элемент с помощью useLocation крючков и передаю их в поле ввода для моего инициала useState , но каждый раз, когда я редактирую/вводю символ, text field не уверен, называется ли он повторным отображением или чем-то еще, но useLocation он будет передан в консоли. Вот мой код:

Редактировать Страницу/Экран

 import axios from "axios";
import React, { useState } from "react";
import { useLocation } from "react-router";

export const EditScreen = () => {
const location = useLocation().state;
console.log(location);

const [title, setTitle] = useState(location.b_title);
const [content, setContent] = useState(location.b_content);
const [category, setCategory] = useState(location.category_id);

const submitHandler = (e) => {
  e.preventDefault();
  axios
  .put(`http://localhost:3001/api/v1/blog/${location.id}`, {
    blog_title: title,
    blog_content: content,
    category_id: category,
  })
  .then(alert("success edit blog"))
  .catch((err) => alert(err));
 setTitle("");
 setContent("");
 setCategory("");

};

return (
<div>
  <h1>edit blog page</h1>
  <form onSubmit={submitHandler}>
    <input
      type="text"
      placeholder="title"
      value={title}
      onChange={(e) => setTitle(e.target.value)}
    />
    <br />
    <br />
    <input
      type="text"
      placeholder="content"
      value={content}
      onChange={(e) => setContent(e.target.value)}
    />
    <br />
    <br />
    <input
      type="text"
      placeholder="category"
      value={category}
      onChange={(e) => setCategory(e.target.value)}
    />
    <br />
    <br />
    <input
      type="submit"
      value="submit"
      disabled={
        title === "" || content === "" || category === "" ? true : false
      }
    />
  </form>
</div>
 );
};

Снимок экрана консоли

введите описание изображения здесь

Вы можете видеть выше ss в красном круге, в этом проблема.

Комментарии:

1. Это происходит потому, что каждый раз, когда вы вводите, вы устанавливаете новое состояние, вызывающее новый рендеринг, который вызывает console.log . Почему это проблема?

2. Вы также выполняете консольный вход в тело компонента функции в качестве непреднамеренного побочного эффекта. Если вы действительно хотите увидеть, как часто компонент визуализируется/перенаправляется, затем войдите в систему консоли useEffect . Чтобы повторить то, что сказал Альдо, вы обновляете состояние, и каждое обновление запускает повторную отправку, здесь нет ничего плохого, это то, как работает реакция.

3. @AldoSanchez На самом деле я спрашиваю об этом, потому что я не уверен, является ли это проблемой или нормальной вещью, потому что я представляю, что если в веб-блоге будут тысячи символов, каждый символ, который я набираю, тогда он повторно отображает состояние, но если это нормально, то спасибо за объяснение 🙂

4. @DrewReese Я попытался утешить его, useEffect и он перерисовывался только один раз, спасибо, чувак, я нашел то, что искал 🙂

Ответ №1:

Братан, мы не можем запретить setState повторно отображать компонент, так как ранее он был указан по умолчанию. Поэтому вы должны использовать технику отмены, чтобы предотвратить повторную визуализацию https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript вы можете прочитать эту статью, чтобы лучше понять, как вы можете это сделать. Это четко упоминается с примерами в статье. Вы также можете изменить событие на onBlur вместо onChange. Мы уменьшаем количество заданных состояний от вызова и уменьшаем повторный рендеринг.

Метки: