在return语句上面，从useState中destructured的变量是否无法使用？

Question

我被一个React Context Provider卡住了，在那里我用以下方式定义状态 useState 然后想通过当前状态值，我从 useState 变成 getSearchResults() 实用函数，构建一个API查询字符串并返回一个JSON对象。

问题：所有的解构值都没有被JS注意到。当传递到 getSearchResults() 职能。searchText, pageNum 和 productsPerPage 都是未定义的。有谁能帮忙吗？Merci!

  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

你的状态变量被 阴影 的函数参数，而不是传入的。

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

上述函数声明意味着 getSearchResults 希望传递三个值，并将它们称为 searchText, pageNum和 productsPerPage. 它们将优先于同一作用域中的任何其他同名变量。

你所期望的是这三个值实际上是定义在作用域内的变量。

因此，我们可以写一个没有参数的函数。

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

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