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

Question

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

我研究了一下，发现这个状态延迟的问题可以通过在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
  };

Answer 1

总是迟到一个字符

控制台日志在前一个状态周期内，因此预计它会延迟“一个周期”。记住setState()是异步的。

如果要记录当前更改，请使用useEffect钩子。

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

效果挂钩将侦听当前filteredData更改并记录下来。

另外我建议使用useCallback事件处理程序。