Рендеринг данных из api

Question

  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  useEffect(() => {
    fetch("api-url")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.items);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])
if (error) {
  return <div>Error: {error}</div>
} else if (!isLoaded) {
  return <div>Loading...</div>;
} else {
  return (
      <ul>
        {items.map(item => (
          console.log(item)
        ))}
      </ul>
    );
  }

Как я могу визуализировать данные из массива объектов в машинописном тексте?
Я могу видеть данные при вызове console.log (item), консоль показывает массив объектов со всеми данными внутри

Я пробовал

 <ul>
     {items.map(item => (
       <li key={item.value}>
         {item.label}
       </li>
     ))}
 </ul>

База данных состоит из массива объектов - {label: "string", value: "string", boolean: true}
Когда я пробую item.label или item.value, я получаю «Свойство 'label' не существует для типа 'never'».

Answer 1

Вы можете определить тип ожидаемых значений в useState, например:

const [items, setItems] = useState<Object[]>([]);

Где Object может быть фактическим интерфейсом вашего элемента.

Answer 2

Попробуйте присвоить своему «элементу» тип «любой», чтобы TS не видел его как «никогда».

 <ul>
     {items.map((item: Item) => (
       <li key={item.value}>
         {item.label}
       </li>
     ))}
 </ul>

Изменить: добавлен пример настраиваемого интерфейса вместо использования «любой ".

interface Item {
  value: string;
  label: string;
  someBOolean: boolean;
}