如何解决为组件动态更改文本
我有一个反应组件,它每 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>
) ;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。