动态响应组件的更改文本

Question

我有一个react组件，它每4秒从数据库中提取一次数据，导致状态更改并重新渲染。然而，我有一些文本，我希望能够点击和编辑，而不需要重新渲染中断它。我目前有这个文本更改。。。

const [name, setName] = useState("name")
handleChange(event) {
setName(event.target.value);
}

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

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

Answer 1

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

您的文本字段值取决于作为状态的名称，因此不应该对其进行重新初始化。但同样，我不知道你的项目的结构，所以不能说明为什么状态在重新渲染时被重新初始化

解决方案：这更像是一个破解，但您可以使用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>
)   ;
}