javascript - React hooks 回调接收过时状态

Question

在简单的搜索组件上尝试 react Hook 。这个想法很简单:用户输入符号，每个输入的符号都会启动 api 查询。
为了实现这一点，我有 useState 和 useCallback Hook ，如下面的代码所示:

const Search = () => {
  const [query, setQuery] = useState("");
  const sendRequest = useCallback(() => {
    console.log('sendRequest ', query);
  }, [query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        placeholder="Search"
        onChange={e => {
          console.log('onChange ', e.target.value);
          setQuery(e.target.value);
          sendRequest();
        }}
      />
    </div>
}

结果是 sendRequest 方法始终获取 query 的先前版本。

onChange q
sendRequest 
onChange qu
sendRequest q
onChange que
sendRequest qu

这是为什么呢？我认为这不是钩子(Hook)应该如何使用的，但我无法从 documentation 中弄清楚这一点。 .

Answer 1

setState 是异步的! 在发送 sendRequest 时，本地状态不会更新，因为它是异步的，需要一些时间来设置。

您应该将字符串作为参数提供给函数或 useEffect 并监听查询的更改。

将 useCallback 与 useEffect 交换并删除 onChange 中的调用应该可以工作。

const Search = () => {
  const [query, setQuery] = useState("");

  useEffect(() => {
    console.log('sendRequest ', query);
  }, [query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        placeholder="Search"
        onChange={e => {
          setQuery(e.target.value);
        }}
      />
    </div>
}