如何使用 TypeScript 在 useState 中设置对象数组

Question

 const res = {
      results: {
        documents: [
          {
            suggestion: 'tes1',
          },
          {
            suggestion: 'test2',
          },
          {
            suggestion: 'test3',
          },
          {
            suggestion: 'test4',
          },
        ],
      },
      meta: {
        request_id: '0e6aa4da',
      },
    };

我想将“res”数据设置到 useState() 中。

所以我创建了接口：

interface IResult {
  documents: [
    {
      suggestion: string;
    }
  ];
}

这就是我的 useState 的样子：

  const [querySuggestionResult, setQuerySuggestionResult] = useState<IResult[]>(
    []
  );

我想将这个json文件（响应表单API）设置到useState中，所以我尝试了

setQuerySuggestionResult([{documents: res.results.documents}]);

我也这样尝试过

setGuerySuggestionResult(res.results.documents);

我得到一个错误

有人可以向我解释一下如何将对象数组设置为 useState 吗？

Answer 1

我发现使用Array泛型类型（Array<T>）的最简单方法：

interface Foo {
    id: string;
}

const [list, setList] = useState<Array<Foo>>([]);

您还可以指定数组文字 ( T[])：

const [listAlt, setListAlt] = useState<Foo[]>([]);

// edit: another way using `readonly`
const [readonlyList, setReadonlyList] = useState<readonly Foo[]>([]);

请注意，要使用readonly，使用Array<...>将不起作用（即readonly Array<Foo>不会起作用）。您必须使用该readonly Foo[]符号。

Answer 2

是否有可能接口定义不正确？不应该是这样的吗？：

interface IResult {
  documents: {
      suggestion: string;
    }[];
}