как установить тип выборки useState для реакции и использовать метод карты

в настоящее время я практикую реакцию-ts на получение данных json через асинхронный сборщик

пример кода ниже, как это

//Test.tsx
import React, { useState, useEffect } from 'react';
import fetcher from 'api/fetcher';

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

const Test: React.FC = () => {
  const [data, setData] = useState<Todo[]| Promise<Todo[]>>([{
    userId: 1,
    id: 1234,
    title: "test",
    completed: false
  }]);

  useEffect(() => {
    const result = fetcher("https://jsonplaceholder.typicode.com/todos");
    setData(result);
    console.log(result);
  }, [])
  return (
    <div>
      //error in here
      **{data && data.map()}**
        {/* {data && data.map((item: Todo)=> {
          <div>{item.id}<div>
        })} */}
  </div>
  );
}
export default Test;

//fetcher.ts
async function fetcher(url: RequestInfo) {
  try {
    const res = await fetch(url);
    const json = await res.json();
    console.log("json: ", json);
    return json;
  } catch (e) {
    throw e;
  }
}

export default fetcher;

Сообщение об ошибке: свойство 'map' не существует для типа 'Todo [] | Обещать'. Свойство "карта" не существует для типа "Обещание".

Я знаю, что метод карты не может использоваться в Promise Object. из-за асинхронного вызова начальный тип данных устанавливается как Promise type и переключается на Todo [], когда выборка разрешена.

как решить эту проблему, чтобы динамически использовать метод карты


reactjs typescript async-await react-typescript
person North    schedule 11.04.2020    source источник
comment
Вам нужно await позвонить fetcher, чтобы получить список дел вне обещания. Попробуйте использовать метод, предложенный в этом ответе в вашем useEffect.   -  person Cameron Little    schedule 11.04.2020
comment
Комментарий 1 правильный и должен быть отмечен как ответ. Использование useState<Todo[]> исправит эту конкретную ошибку.   -  person bastianwegge    schedule 11.10.2020
comment
@CameronLittle, я забыл ответить .. извините и спасибо всем вам   -  person North    schedule 17.11.2020
comment
@bastianwegge thx !!   -  person North    schedule 17.11.2020

Ответы (1)


arrow_upward
5
arrow_downward

Вы не должны устанавливать для обещания состояние, вместо этого устанавливайте результат, полученный после разрешения обещания. Чтобы дождаться выполнения обещания, вы можете использовать метод async-await или conventional .then. Также удалите Promise как тип из значения useState

const Test: React.FC = () => {
  const [data, setData] = useState<Todo[]>([{
    userId: 1,
    id: 1234,
    title: "test",
    completed: false
  }]);

  useEffect(() => {
    fetcher("https://jsonplaceholder.typicode.com/todos").then((result) => {
        setData(result);
    });
  }, [])
  return (
    <div>
        {data && data.map((item: Todo)=> {
          <div>{item.id}<div>
        })}
  </div>
  );
}
export default Test;
person Shubham Khatri    schedule 11.04.2020