React Hooks и TypeScript Fetching API: объект, возможно, равен нулю - PullRequest
Новая
       14

React Hooks и TypeScript Fetching API: объект, возможно, равен нулю

0 голосов
/ 07 июня 2019

Я делаю учебник по React Hooks и получаю данные. Вот мой компонент, чтобы выбрать клиентов и отобразить их в списке: 

const useFetch = (url: string) => {
  const [customers, setCustomers] = useState<null | []>(null);
  const [loading, setLoading] = useState(true);

  // Similiar to componentDidMount() and componentDidUpdate()
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(url);
      setCustomers(result.data);
      setLoading(false);
    };
    fetchData();
  });

  return { customers, loading };
};

const url = 'https://jsonplaceholder.typicode.com/users';

export const LatestCustomers: React.FC<Props> = ({
  description
}: Props): JSX.Element => {
  const { customers, loading } = useFetch(url);

  return (
    <Container>
      {loading ? (
        <div>...Loading...</div>
      ) : (
        <tr>
          {customers.map(customer => (
            <div key="user.id">{customer.name}</div>
          ))}
        </tr>
      )}
    </Container>
  );
};

С этим я получил ошибку: 

Object is possibly 'null'.  TS2531

    108 |               ) : (
    109 |                 <tr>
  > 110 |                   {customers.map(customer => (
        |                    ^
    111 |                     <div key="user.id">{customer.name}</div>
    112 |                   ))}
    113 |                 </tr>

Как мне решить эту проблему?

Ответы [ 2 ]

1 голос
/ 07 июня 2019

Надежным решением для обработки значений, допускающих значение NULL, может быть использование опции в fp-ts и fromNullable

https://github.com/gcanti/fp-ts/blob/master/src/Option.ts

Пример:

{fromNullable(customers).map(x=> {...})}

Интересная статья: https://davetayls.me/blog/2018/05/20/fp-ts-01-working-with-nullable-values

В противном случае более простой подход:

{customers && customers.map(x => ( ...

1 голос
/ 07 июня 2019

Поскольку тип, предоставленный для useState, равен null | [], то customers присваивается эта сигнатура типа.

Есть несколько способов справиться с этим. Мое предложение будет начинаться с пустого массива: 

const [customers, setCustomers] = useState<[]>([]);

В качестве альтернативы, если вы хотите сохранить опциональный набор текста, вам следует проверить, что customers не null first: 

{customers && customers.map(customer => ( ...

Или, если вы действительно уверены, что он всегда будет определен, вы можете использовать оператор TypeScript, отличный от NULL, n !: 

{customers!.map(customer => (
...