为组件动态更改文本

编程问答 2022-06-02

问题描述

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

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

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

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

解决方法

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

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

解决方案： 这更像是一个 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>
  )   ;
}
inputinputonchangeonchangereactjsreactjsreactjsreactjsrerender