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

Question

所以基本上我的问题是我有两个页面/屏幕（主要和编辑）。在页面中，当我单击一个项目时，它会使用包中的挂钩Main将其传递到Edit页面。在页面中，我使用钩子获取项目并将它们传递给我的初始输入字段，但是每次我编辑/键入一个字符时都不确定它是否被称为重新渲染或其他任何东西，但将在控制台中传递。这是我的代码：useHistoryreact-router-domEdituseLocationuseStatetext fielduseLocation

编辑页面/屏幕

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，这就是问题所在。

标签： javascriptreactjsreact-hooksreact-router

Answer 1

兄弟，我们不能阻止 setState 重新渲染组件，因为它是之前指定的默认默认值。因此，您必须使用去抖动技术来防止发生多次重新渲染去做。文章中通过示例清楚地提到了它。您还可以将事件更改为 onBlur 而不是 onChange 我们减少了调用 setStates 的数量并且我们减少了重新渲染。