В чем ошибка с типами User?

Question

[Ratibor Shugaev]

Доброго времени суток. Изучаю ts, путем разбора разных найденных в сети задач. Подскажите, в чем ошибка?
Имеется код:

import React, { useState } from "react";

const URL = "https://jsonplaceholder.typicode.com/users";

type Company = {
  bs: string;
  catchPhrase: string;
  name: string;
};

type User = {
  id: number;
  email: string;
  name: string;
  phone: string;
  username: string;
  website: string;
  company: Company;
  address: any;
};

interface IButtonProps {
  onClick: any;
}

function Button ({ onClick }: IButtonProps): JSX.Element {
  return (
    <button type="button" onClick={onClick}>
      get random user
    </button>
  );
};

interface IUserInfoProps {
  user: User;
}

function UserInfo ({ user }: IUserInfoProps): JSX.Element {
  return (
    <table>
      <thead>
        <tr>
          <th>Username</th>
          <th>Phone number</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{user.name}</td>
          <td>{user.phone}</td>
        </tr>
      </tbody>
    </table>
  );
};

function App(): JSX.Element {
  const [item, setItem] = useState<User[] | null>(null);

  const receiveRandomUser = async () => {
    const id = Math.floor(Math.random() * (10 - 1)) + 1;
    const response = await fetch(`${URL}/${id}`);
    const _user = (await response.json()) as User;
    setItem(_user);
  };

  const handleButtonClick = (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    event.stopPropagation();
    receiveRandomUser();
  };

  return (
    <div>
      <header>Get a random user</header>
      <Button onClick={handleButtonClick} />
      <UserInfo user={item} />
    </div>
  );
}

export default App;

и ошибка



Не очень понятно в какую сторону копать. Спасибо за ваши ответы!

Answer 1

[Alexandroppolus]

useState< User[] | null >(null);

useState<User | null>(null);

И рендерить UserInfo, только если item != null

Comments

[Ratibor Shugaev]

Спасибо! А в чем заключается ошибка, подскажите?

Answer 2

[Дмитрий Беляев]

useState<User[] | null>(null);

Здесь Вы пишите, что в стейте у Вас либо null либо массив юзеров.

const _user = (await response.json()) as User;
setItem(_user);

а здесь Вы уговорили TS что ответ - это 1 юзер и пытаетесь передать его в стейт.

interface IUserInfoProps {
  user: User;
}

а вот здесь у Вас компонент так же принимает только одного юзера, но передаете Вы ему

<UserInfo user={item} />

значение из стейта с типом User[] | null

Comments

[Ratibor Shugaev]

Спасибо!