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

Question

我被 React Context Provider 困住了，我在其中使用 useState 定义状态，然后想将我从 useState 解构的当前状态值传递到 getSearchResults() 实用程序函数构造一个 API 查询字符串和 returns 一个 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; ```

Answer 1

您的状态变量由函数参数shadowed，而不是传入。

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

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

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

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

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

现在函数不需要任何值，但可以访问状态变量。

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

Are variables destructured from useState unusable above a return statement?

destructuring

reactjs

react-context

use-state