Reactjs 动态响应组件的更改文本

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

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

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

const[name，setName]=useState（“name”）
手变（活动）{
setName（event.target.value）；
}
render（）{
返回(
);
}

---

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

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

textfield值取决于状态名称，因此不应重新初始化。 但同样，我不知道您的项目的结构，所以无法说明为什么在重新渲染时状态会被重新初始化

解决方案： 这更像是一种黑客行为，但您可以在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>
  )   ;
}

let timer=null；
让timeout=null；
常量应用=（）=>{
const[name，setName]=useState（“name”）；
const[count，setCount]=useState（0）；
函数句柄更改（事件）{
中频（定时器）{
清除间隔（计时器）；
定时器=空；
}
如果（！timeout）timeout=setTimeout（（）=>{
清除间隔（超时）；
超时=空；
计时器=设置间隔（（）=>{
setCount（（count）=>count+1）；
}, 500);
}, 2000); 
setName（event.target.value）；
}
useffect（（）=>{
计时器=设置间隔（（）=>{
setCount（count=>count+1）；
}, 500)
}, [])  
返回(
{count}

)   ;
}

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

textfield值取决于状态名称，因此不应重新初始化。 但同样，我不知道您的项目的结构，所以无法说明为什么在重新渲染时状态会被重新初始化

解决方案： 这更像是一种黑客行为，但您可以在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>
  )   ;
}

let timer=null；
让timeout=null；
常量应用=（）=>{
const[name，setName]=useState（“name”）；
const[count，setCount]=useState（0）；
函数句柄更改（事件）{
中频（定时器）{
清除间隔（计时器）；
定时器=空；
}
如果（！timeout）timeout=setTimeout（（）=>{
清除间隔（超时）；
超时=空；
计时器=设置间隔（（）=>{
setCount（（count）=>count+1）；
}, 500);
}, 2000); 
setName（event.target.value）；
}
useffect（（）=>{
计时器=设置间隔（（）=>{
setCount（count=>count+1）；
}, 500)
}, [])  
返回(
{count}

)   ;
}

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

get

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

get

请求。