SetIinterval/Polling every 5 seconds resets the values of my state variables/args instead of keeping the most recently set ones?

huangapple
go评论92阅读模式
英文:

SetIinterval/Polling every 5 seconds resets the values of my state variables/args instead of keeping the most recently set ones?

问题

在我的主要React组件中，我正在进行GET请求的地方，我有一个输入字段，可以将numericalArg设置为任何整数（如59）。然而，当定时器触发时，numericalArg被重置为基本上什么都没有，而不是理想值59。

我该如何修复这个问题？我尝试使用useRef()，它有点起作用（？），但它一点都不一致，甚至经常破坏输入字段（例如，我无法在numericalArg的输入字段中输入任何数字，原因不明）。

有什么帮助吗？

英文:

So in my primary React component where I'm making a GET request, I have

  1. const [responseData, setResponseData] = useState('')
  3. const [numericalArg, setNumericalArg] = useState('')
  4. /* or I have */:
  5. const numericalArg = useRef('')
  7. const handleTopRequest = (arg1) => {
  8.   url = "base_url" + `?${numericalArg}`
  9.   axios.get(url)
  10.     .then(response => {
  11.       setResponse(response)
  12.     }
  13. }
  15.   useEffect(() => {
  16.     handleTopRequest(sortByParam);
  17.     const intervalId = setInterval(handleTopRequest, 5000);
  18.     return () => clearInterval(intervalId);
  19.   }, []);
  21.   const handleNumArgChange = (event) => {
  22.     setNumericalArg(event.target.value);
  23.     // numProcesses.current = event.target.value;
  24.   };
  26. return
  27.   <div>
  28.           <label>
  29.             Number of Processes:
  30.             <input
  31.               type="number"
  32.               value={numericalArg}
  33.               onChange={handleNumArgChange}/>
  34.           </label>
  35. ...
  36.    <div>{JSON.stringify(responseData)}</div>
  37.   </div>

I have an input field where I can set numericalArg to whatever integer I'd like (like 59). However, when the interval fires, numericalArg gets reset to essentially nothing, instead of the ideal value of 59.

How do I fix this? I tried using useRef(), and it kinda works (?), but it's not consistent at all and even breaks the input field many times (for example, I can't even type in any numbers in the input field for numericalArg for some reason).

Any help?

答案1

得分: 1

问题

问题在于handleTopRequest处理程序中对numericalArg状态值的闭包已经过时。useEffect钩子在组件挂载后运行一次，对初始的numericalArg值进行了闭包，即""，并实例化了间隔。间隔每次都调用相同的handleTopRequest回调的这个实例。

解决方案

我认为您正在尝试使用React引用是正确的方法。使用React引用和useEffect钩子来缓存当前状态值，并在handleTopRequest回调函数中访问引用的当前值。

示例：

  1. const [responseData, setResponseData] = useState('');
  2. const [numericalArg, setNumericalArg] = useState('');
  4. // 引用用于保存当前状态值
  5. const numericalArgRef = useRef(numericalArg);
  7. // 在更新时缓存当前状态值的效果
  8. useEffect(() => {
  9.   numericalArgRef.current = numericalArg;
  10. }, [numericalArg]);
  12. useEffect(() => {
  13.   const handleTopRequest = () => {
  14.     // 访问当前 numericalArgRef 值
  15.     url = "base_url" + `?${numericalArgRef.current}`;
  17.     axios.get(url).then(setResponse);
  18.   };
  20.   handleTopRequest();
  22.   const intervalId = setInterval(handleTopRequest, 5000);
  23.   return () => clearInterval(intervalId);
  24. }, []);
  26. const handleNumArgChange = (event) => {
  27.   setNumericalArg(event.target.value);
  28. };
  30. return (
  31.   <div>
  32.     <label>
  33.       进程数量：
  34.       <input
  35.         type="number"
  36.         value={numericalArg}
  37.         onChange={handleNumArgChange}
  38.       />
  39.     </label>
  40.     ...
  41.     <div>{JSON.stringify(responseData)}</div>
  42.   </div>
  43. );
英文:

Issue

The issue here is a stale closure over the numericalArg state value in the handleTopRequest handler. The useEffect hook runs once after the component mounts, closes over the initial numericalArg value, i.e &quot;&quot;, and instantiates the interval. The interval calls this same instance of the handleTopRequest callback each time.

Solution

I think you are on the right track trying to use a React ref. Use a React ref and a useEffect hook to cache the current state value, and access the ref's current value in the handleTopRequest callback function.

Example:

  1. const [responseData, setResponseData] = useState(&#39;&#39;);
  2. const [numericalArg, setNumericalArg] = useState(&#39;&#39;);
  4. // Ref to hold current state value
  5. const numericalArgRef = useRef(numericalArg);
  7. // Effect to cache current state value when it updates
  8. useEffect(() =&gt; {
  9.   numericalArgRef.current = numericalArg;
  10. }, [numericalArg]);
  12. useEffect(() =&gt; {
  13.   const handleTopRequest = () =&gt; {
  14.     // Access current numericalArgRef value
  15.     url = &quot;base_url&quot; + `?${numericalArgRef.current}`;
  17.     axios.get(url).then(setResponse);
  18.   };
  20.   handleTopRequest();
  22.   const intervalId = setInterval(handleTopRequest, 5000);
  23.   return () =&gt; clearInterval(intervalId);
  24. }, []);
  26. const handleNumArgChange = (event) =&gt; {
  27.   setNumericalArg(event.target.value);
  28. };
  30. return (
  31.   &lt;div&gt;
  32.     &lt;label&gt;
  33.       Number of Processes:
  34.       &lt;input
  35.         type=&quot;number&quot;
  36.         value={numericalArg}
  37.         onChange={handleNumArgChange}
  38.       /&gt;
  39.     &lt;/label&gt;
  40.     ...
  41.     &lt;div&gt;{JSON.stringify(responseData)}&lt;/div&gt;
  42.   &lt;/div&gt;
  43. );

huangapple
  • 本文由 发表于 2023年7月20日 10:26:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76726292.html
  • react-hooks
  • react-native
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定