Question

在一个简单的搜索组件上试用react挂钩。这个想法很简单：用户键入符号，每个键入的符号都会启动api查询。
为此，我有useState和useCallback钩子，如下面的代码所示：


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

那是为什么？我认为这不是应该使用钩子的方式，但是我无法从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>
}

Answer 2

使用useEffect代替useCallback。当查询更改时，useEffect会触发您的回调函数。

bool fromStringtoBool() {……} int fromStringtoInt() {……} void setAppidConfig(int,bool); void setAppidConfig(int,int); …… …… void main func() { …… int usrId; auto value; if(isBool()) { value = fromStringtoBool(); } else { value = fromStringtoInt(); } setAppidConfig(usrId,value) …… }

Answer 3

嘿，兄弟，您可以按预期尝试此实现，

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

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

反应挂钩回调接收过时的状态

3 个答案: