尽管已将 null 设置为选项，但无法将 React useFormState 类型属性设置为 null

Question

我正在使用打字稿。我有一个类型，其属性“message”可以是字符串或 null

export type State = {
  message: string | null;
};

尽管如此，当尝试将该属性设置为 null 时，我收到以下类型错误。它只允许我将其设置为字符串。

Types of property 'message' are incompatible.
Type 'null' is not assignable to type 'string'.

我正在使用这样的类型：

const initialState = { message: null };
const [state, dispatch] = useFormState(postFiles, initialState);

export async function postFiles(prevState: State, formData: FormData) {
  console.log(formData);
  return {
    message: "Uploaded",
  };
}

我尝试将 strictNullChecks 设置为 true，但仍然收到错误。会是什么呢？我缺少什么吗？

Answer 1

问题是因为的类型useFormState如下：

    function useFormState<State, Payload>(
        action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
        initialState: Awaited<State>,
        permalink?: string,
    ): [state: Awaited<State>, dispatch: (payload: Payload) => void];

由于action被定义为，这意味着在本例中，(state: Awaited<State>, payload: Payload) => State该返回值将被自动推断为。actionpostFilesState

该返回值是一个对象文字，其中message是一个字符串。这意味着initialState: Awaited<State>评估结果为string您的null值无效。

要修复此问题，请显式传递类型参数，以便 TS 提前知道该值是什么。

const [state, dispatch] = useFormState<State, FormData>(postFiles, initialState);