反应usestate，setstate和{state}回报

发布于 2025-01-19 04:14:53 字数 911 浏览 0 评论 0 原文

我遇到了 React State 的渲染问题。
问题是 {state} 返回的值晚了一拍。
但 handleChange 中的控制台日志显示正确的值。
如果 state 的先前值为 9，state value 的当前值为 10，则 handleChange 中的 console.log({state}) 显示 10，并且 < ;span>{state} 返回显示 9。
它看起来与其他状态异步问题不同。
我不明白为什么会这样。

const [findText, setFindText] = useState("");
const [findCount, setFindCount] = useState(0);

const handleChange = (e) => {
    let str = e.target.value;
    setFindText(str);

    let cnt = 0;
    doxDocument.map((docx) => {
      cnt += docx.src.split(findText).length - 1;
    });
    setFindCount(cnt);
    console.log({findCount})
};

return( 
<div>
  <input
    type="text"
    value={findText}
    onChange={handleChange}
  />
  <span>{findCount} found <span>
</div>
);

原文

I come across the rendering issue with React State.
The problem is that {state} in return get value one beat late.
But the console log in handleChange shows right value.
If the previous value of state is 9, current value of state value is 10 then the console.log({state}) in handleChange shows 10 and the <span>{state}<span> in return shows 9.
It looks different from other state async problem.
I can't understand why this happened.

const [findText, setFindText] = useState("");
const [findCount, setFindCount] = useState(0);

const handleChange = (e) => {
    let str = e.target.value;
    setFindText(str);

    let cnt = 0;
    doxDocument.map((docx) => {
      cnt += docx.src.split(findText).length - 1;
    });
    setFindCount(cnt);
    console.log({findCount})
};

return( 
<div>
  <input
    type="text"
    value={findText}
    onChange={handleChange}
  />
  <span>{findCount} found <span>
</div>
);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放我走吧 2025-01-26 04:14:53

两个问题...

FindText 在您在 split（）中使用时，不会将其更新为新值。用 str 而不是计算 findcount 在备忘或代码> FindText 。
您将完全滥用 filter（）。使用 redy（）计算计算总和

  const [findText, setFindText] = useState("");
  const findCount = useMemo(
    () =>
      findText
        ? doxDocument.reduce(
            (sum, { src }) => sum + src.split(findText).length - 1,
            0
          )
        : 0,
    [findText, doxDocument] // may not need doxDocument
  );

  return (
    <div id="App">
      <input
        type="text"
        value={findText}
        onChange={(e) => setFindText(e.target.value)}
      />
      <span>{findCount} found</span>
    </div>
  );

Two problems...

findText will not have been updated to the new value when you use it in split(). Either use str instead or calculate findCount in a memo or effect hook with a dependency on findText.
You're completely misusing filter(). Use reduce() to calculate a computed sum

  const [findText, setFindText] = useState("");
  const findCount = useMemo(
    () =>
      findText
        ? doxDocument.reduce(
            (sum, { src }) => sum + src.split(findText).length - 1,
            0
          )
        : 0,
    [findText, doxDocument] // may not need doxDocument
  );

  return (
    <div id="App">
      <input
        type="text"
        value={findText}
        onChange={(e) => setFindText(e.target.value)}
      />
      <span>{findCount} found</span>
    </div>
  );