更改输入状态会延迟一个字符（useState 挂钩）

我正在尝试在我的社交网络中实现用户个人资料的即时搜索。它似乎有效，但在输入更改时设置状态（使用挂钩）会导致延迟一个字符。

我研究了一下，发现状态延迟的问题可以通过在 setState 中使用回调函数来解决。但是，useState 不支持这一点。

这是我的输入元素：

<input
   type="text"
   placeholder="Enter your query"
   name="query"
   onChange={e => onChange(e)}
/>

这是我的状态和 onChange 处理程序：

const [filteredData, setFilteredData] = useState({
    query: "",
    filteredProfiles: profiles
  });


const onChange = e => {
    setFilteredData({
      query: e.target.value,
      filteredProfiles: profiles.filter(person =>
        person.user.name.includes(e.target.value)
      )
    });
    console.log(e.target.value); // outputs correct value immediately
    console.log(filteredData.query); // it's always one character late
    console.log(filteredData.filteredProfiles); //works but 1 char late as well
  };

总是迟到一个字符

控制台日志位于前一个状态周期内，因此预计会晚“一个周期”。记住setState()是异步的 https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3.

如果您想记录当前更改，请使用useEffect hook.

  useEffect(() => {
    console.log(filteredData.query); // not late
    console.log(filteredData.filteredProfiles); // same here!
  }, [filteredData]);

效果钩子将监听当前filteredData更改并记录它。

我也建议使用useCallback对于事件处理程序。