如何防止useState和useLocation在react js的输入/文本字段中重新呈现？答案

【问题标题】：How to Prevent useState & useLocation from re rendering in input/text field in react js?如何防止useState和useLocation在react js的输入/文本字段中重新呈现？
【发布时间】：2021-11-07 21:22:21
【问题描述】：

所以基本上我的问题是我有两个页面/屏幕（主要和编辑）。在Main 页面中，当我单击一个项目时，它会使用来自react-router-dom 包的useHistory 挂钩将其传递给Edit 页面。在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，这就是问题所在。

【问题讨论】：

这是因为每次您键入时都会设置一个新状态，从而导致调用 console.log 的新渲染。为什么这是一个问题？
您也是控制台登录功能组件的主体，这是一种无意的副作用。如果您真的想查看组件被渲染/重新渲染的频率，那么控制台登录 useEffect 钩子。为了回应 Aldo 所说的，您正在更新状态并且每次更新都会触发重新渲染，这里没有任何问题，这就是 React 的工作原理。
@AldoSanchez 实际上我问这个是因为我不确定这是一个问题还是正常的事情，因为我想如果一个博客网站每个我输入的字符都会有数千个字符，那么它会重新呈现状态，但如果这件事正常，那么感谢您的解释:)
@DrewReese 我在useEffect 中尝试了控制台它只重新渲染一次，谢谢，我找到了我想要的:)

标签： javascript reactjs react-hooks react-router

【解决方案1】：

兄弟，我们不能阻止 setState 重新渲染组件，因为它是之前指定的默认默认值。因此，您必须使用去抖动技术来防止发生多次重新渲染https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript 您可以阅读这篇文章，以便更清楚地了解如何做到这一点。文章中通过示例清楚地提到了它。您还可以将事件更改为 onBlur 而不是 onChange 我们减少了调用 setState 的数量并减少了重新渲染。

【讨论】：