从 useState 解构的变量在 return 语句上方是否不可用？答案

【问题标题】：Are variables destructured from useState unusable above a return statement?从 useState 解构的变量在 return 语句上方是否不可用？
【发布时间】：2020-05-28 14:14:38
【问题描述】：

我被 React Context Provider 卡住了，我在其中使用 useState 定义状态，然后想将我从 useState 解构的当前状态值传递到构造 API 查询字符串并返回的 getSearchResults() 实用函数一个 JSON 对象。

问题：所有被解构的值都不会被 JS 注意到。当传入getSearchResults() 函数时，searchText、pageNum 和productsPerPage 都是未定义的。任何人都可以帮忙吗？谢谢！

  const [searchText, setSearchText] = useState("");
  const [pageNum, setPageNum] = useState(1);
  const [productsPerPage, setproductsPerPage] = useState(10);

  const [searchResults, setSearchResults] = useState([]);

  const getSearchResults = (searchText, pageNum, productsPerPage) =>
    setSearchResults(fetchBeers(searchText, pageNum, productsPerPage));

  return (
    <SearchContext.Provider
      value={{
        searchResults,
        getSearchResults,
      }}
    >
      {children}
    </SearchContext.Provider>
  );
};

export default SearchProvider; ```

【问题讨论】：

标签： reactjs destructuring use-state react-context

【解决方案1】：

你的状态变量被函数参数shadowed，没有被传入。

const getSearchResults = (searchText, pageNum, productsPerPage) =>
    setSearchResults(fetchBeers(searchText, pageNum, productsPerPage));

上面的函数声明意味着getSearchResults期望被传递三个值，它将引用它们为searchText、pageNum和productsPerPage。它们将优先于同一范围内具有相同名称的任何其他变量。

您所期望的是这三个值实际上是在范围内定义的变量。

因此，请编写不带参数的函数：

const getSearchResults = () =>
    setSearchResults(fetchBeers(searchText, pageNum, productsPerPage));

现在该函数不会期望任何值，但可以访问状态变量。

【讨论】：