在 return 中反应 useState、setState 和 {state}

Question

我遇到了 React State 的渲染问题。
问题是 return 中的 {state} 迟到了一拍。
但是控制台登录 handleChange 显示正确的值。
如果state的前一个值为9，state value的当前值为10则handleChange中的console.log({state})显示10，return中的<span>{state}<span>显示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>
);

Answer 1

两个问题...

findText 在 split() 中使用时不会更新为新值。要么使用 str 代替，要么在依赖于 findText.

memo

effect

findCount

您完全在误用 filter()。使用 reduce() 计算计算总和

  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>
  );

在 return 中反应 useState、setState 和 {state}

React useState, setState and {state} in return

javascript

state

setstate

reactjs