Question

我对React不太陌生，但是下面的代码很难理解。

const UIContext = React.createContext();
const initialFilter = { ... };

export function UIProvider({ children }) {
  const [queryParams, setQueryParamsBase] = useState(initialFilter);

  const setQueryParams = useCallback((nextQueryParams) => { // <- my problem is here
    setQueryParamsBase((prevQueryParams) => {
      ... // some operations
      return nextQueryParams;
    });
  }, []);
  
  const value = {
    queryParams,
    setQueryParamsBase,
    setQueryParams,
  };

  return (
    <UIContext.Provider value={value}>
      {children}
    </UIContext.Provider>
  );
}

我知道useCallback，但是在上面的代码中，一个名为nextQueryParams的变量作为回调的参数传递。

nextQueryParams是什么？变量名听起来与查询参数有关，但是我找不到从React文档中作为参数传递给回调的内容。

如果有人知道，请帮助我。

Answer 1

useCallback仅具有一个功能。从字面上看只是一个古老的功能。不需要带有预定义参数或任何其他内容的特殊函数。

因此setQueryParams通过UIContext.Provider对象prop传递给value组件。在该组件内部，它可以在传递参数的同时使用该函数，例如setQueryParams(someValue)。 someValue将成为nextQueryParams内部函数中的useCallback自变量。

useCallback具有空的依赖项，然后作为回调参数传递什么？

1 个答案: