Question

我正在尝试调用函数getSearch结果以实现搜索的自动完成功能。反应状态不同步，因此，函数以一个字符的滞后调用。请求建议以解决问题。

+   d_can@481cc000 {
+            compatible = "bosch,d_can";
+            ti,hwmods = "d_can0";
+            reg = <0x481cc000 0x2000>;
+            interrupts = <0x34>;
+            status = "disabled";
+            linux,phandle = <0x2c>;
+            phandle = <0x2c>;
+        };
+ 
+        d_can@481d0000 {
+            compatible = "bosch,d_can";
+            ti,hwmods = "d_can1";
+            reg = <0x481d0000 0x2000>;
+            interrupts = <0x37>;
+            status = "disabled";
+            linux,phandle = <0x2d>;
+            phandle = <0x2d>;
+        };

Answer 1

您可以将函数传递给setSearchText，以确保在进行更改之前已完成之前的更改。

setSearchText(text);

可以

setSearchText((prevText) => {
  return text;
});

但是有一种更好的方法可以使用useEffect钩子来完成您想做的事情。

export default function SearchBox() {
  const genreFancyItemContext = useContext(GenreFancyItemContext);

  const { getSearchResults, searchResults } = genreFancyItemContext;

  const [searchText, setSearchText] = useState('');

  useEffect(() => {
   getSearchResults(searchText);
  },[searchText])

  const onChange = e => {
    console.log('On change executes');
    var text = e.target.value;
    setSearchText(text);
    // getSearchResults(searchText);
    console.log(searchResults);
  };

  return (
    <Fragment>
      <SearchBar
        type="text"
        name="searchSting"
        placeholder="  Search Fancyitem..."
        onChange={onChange}
        value={searchText}
      />
      <SearchResult />
    </Fragment>
  );
}

Answer 2

这是您的问题：

getSearchResults(searchText)

searchText实际上是先前的状态。

getSearchResults(text);也可以解决问题。但是，this answer中的解决方案更具可读性。我为此投票：）

反应状态不同步

2 个答案: