为组件动态响应更改文本答案

【问题标题】：React change text dynamically for component为组件动态响应更改文本
【发布时间】：2021-03-31 14:09:47
【问题描述】：

我有一个反应组件，它每 4 秒从数据库中提取数据，导致状态更改并重新渲染。但是，我有一些文本我希望能够单击和编辑而不会重新渲染中断它。我目前有这个用于文本更改...

const [name, setName] = useState("name")

handleChange(event) {
  setName(event.target.value);
}
  
render() {
  return (
    <form>
        <input type="text" value={name} onChange={handleChange} />
    </form>
  );
}

这可行，但是当我的组件重新渲染时它会被中断并重置。在提交输入字段之前，我是否需要暂时禁用渲染？如果是这样，我该怎么做？还是有更简单的选择？

【问题讨论】：

您能否在问题中包含minimal, reproducible example？很难从您问题中当前的代码中说出可能导致此问题的原因。可能是您的组件已重新安装或完全其他原因。
显示所有内容的代码很多，但基本上我的应用程序正在调用 Axios.post 和 Axios.get 以每 4 秒从数据库中获取数据。即使我在中间输入文本字段，这也会更新整个组件。有意义吗？
我明白，但是从目前您问题中的代码很难说可能有什么问题，因此任何人都很难帮助您。如果您将代码归结为仍然会导致错误的内容，那么有人会更容易帮助您。
您是否尝试过将您的 -interval 更新组件 - 移动到另一个模块并在不提醒父组件的情况下更新它？
要准确理解你想要什么有点困难，但我建议进行某种倒计时，每次输入字段更改时 - 你设置一个 2 秒的倒计时不执行get 请求。

标签： reactjs input onchange rerender

【解决方案1】：

从提供的代码中确定解决方案有点困难，但据我所知，您每 4 秒及之后调用 setInterval 来调用 API将其保存在触发重新渲染的某个状态，现在当重新渲染发生时，文本值会被重置。据我所知，state 的值不会在重新渲染时重新初始化，我的意思是这破坏了在 React 中使用 state 的目的。

您的文本字段值取决于状态名称，因此不应重新初始化。但是同样，我不知道您的项目的结构，所以无法判断为什么在重新渲染时会重新初始化状态

解决方案： 它更像是一个 hack，但你可以做的是在 handleChange 函数中使用 setInterval 和 setTimeout。

经过测试，一切正常

let timer = null;
let timeout = null; 
const App = () => {
const [name, setName] = useState("name");
const [count, setCount] = useState(0); 

function handleChange(event) {

if (timer) {
  clearInterval(timer);
  timer = null;
}
if(!timeout) timeout = setTimeout(() => {
  clearInterval(timeout);
  timeout = null;
  timer = setInterval(() => {
    setCount((count) => count + 1);
  }, 500);
}, 2000); 
setName(event.target.value);

}
useEffect(() => {

timer = setInterval(() => {
  setCount(count => count + 1);
  }, 500)
}, [])  
 return (
<form>
  <p>{count}</p>
    <input type="text" value={name} onChange={handleChange} />
</form>
  )   ;
}

【讨论】：