Question

我为状态更复杂的组件提供了一个自定义的React钩子。它基本上是一个普通的useState钩子，但具有两个额外的功能：它检查是否相等并防止重新渲染，并且合并状态而不是替换状态。我需要从null返回setState才能取消状态更新，但是TypeScript不允许我这样做。我收到以下错误：

Argument of type '(prevState: K) => (K & Partial<K>) | null' is not 
assignable to parameter of type 'SetStateAction<K>'.
  Type '(prevState: K) => (K & Partial<K>) | null' is not 
  assignable to type '(prevState: K) => K'.
    Type '(K & Partial<K>) | null' is not assignable to type 'K'.
      Type 'null' is not assignable to type 'K'.ts(2345)

我的钩子看起来像这样：

export function useNestedState<K extends UnknownObject>( // UnknownObject = {[key: string]: any}
  initialState: K,
): [K, (newState: Partial<K>) => void] {
  const [state, setState] = useState<K>(initialState);

  const setNestedState = useCallback((newState: Partial<K>) => {
    setState((prevState) => {
      return comparePartialObject(prevState, newState) // Returns `true` if equal
        ? null // Will cancel state update
        : { ...prevState, ...newState };
    });
  }, []);

  return [state, setNestedState];
}

有人可以帮助我解决此错误吗？

Answer 1

当comparePartialObject为true时，您不是在取消状态更新，而是在使用null更新状态。由于状态为“ K”类型，因此会引发错误，您无法将“ K”类型的状态设置为null。该代码将起作用

setState((prevState) => {
      return comparePartialObject(prevState, newState) // Returns `true` if equal
        ? prevState // Will not change the old state
        : { ...prevState, ...newState };
    });

取消setState更新会导致类型分配错误

1 个答案: