reactjs - TypeScript kullanarak useState içinde bir Nesne dizisi nasıl ayarlanır

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

O 'res' verisini useState() içine yerleştirmek istiyorum.

Yani arayüz oluşturdum:

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

useState'im böyle görünüyor:

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

Bu json dosyasını (API yanıt formu) useState'e koymak istiyorum, bu yüzden denedim

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

Ben de öyle denedim

setGuerySuggestionResult(res.results.documents);

aldığım bir hata

Biri bana bir nesneler dizisini useState ile nasıl ayarlayacağımı açıklayabilir mi lütfen !!

Cevap #1

En kolay yolun bir Array jenerik tipi (Array<T>) kullanmak olduğunu düşünüyorum:

interface Foo {
    id: string;
}

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

Ayrıca bir dizi sabiti (T[]) de belirtebilirsiniz:

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

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

Dikkat edin ki readonly kullanmak için Array<...> kullanmak işe yaramayacaktır (yani, readonly Array<Foo> işe yaramayacaktır). readonly Foo[] gösterimini veya ReadonlyArray<Foo> kullanmalısınız.

Cevap #2

Arayüz tanımının yanlış olması mümkün mü? Bunun gibi bir şey olmamalı mı?

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

İlgili makaleler