Преобразование из React.js в React.tsx Свойство id 'id' не существует для типа never. TS2339

Я пытаюсь следовать руководству, чтобы узнать, как реагировать на тип script. Однако, когда я создаю свое решение, я получаю ошибку. Код

import React, { useState, useEffect } from 'react';
import axios from 'axios';


const DataFetching = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        console.log(res)
        setPosts(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  })
  return (
    <div>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
};

export default DataFetching;

ошибка, которую я получаю

TypeScript error in src/DataFetching.tsx(21,43):
Property 'id' does not exist on type 'never'.  TS2339

Я следую следующему руководству https://www.youtube.com/watch?v=bYFYF2GnMy8 < / а>. Любая помощь или руководство приветствуются


reactjs typescript react-typescript react-tsx
person Krishneil    schedule 04.09.2020    source источник
comment
Отвечает ли это на ваш вопрос? Установить типы в useState React Hook с TypeScript   -  person Etheryte    schedule 04.09.2020

Ответы (2)


arrow_upward
1
arrow_downward

Вы всегда должны указывать type переменной состояния. В этом случае вы используете массив сообщений. Таким образом, вы должны создать интерфейс Post и использовать этот тип в useState.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

interface Post {
  id: number;
  title: string;
}

const DataFetching = () => {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        console.log(res)
        setPosts(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  })
  return (
    <div>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
};

export default DataFetching;
person sidthesloth    schedule 04.09.2020

arrow_upward
1
arrow_downward

Вы должны явно добавить тип к useState. Когда вы предоставляете пустой массив машинописного текста, выведите его тип как never[].

const [posts, setPosts] = useState<Post>([]);

person Алексей Мартинкевич    schedule 04.09.2020
comment
Знаете ли вы, почему он определяет его тип как never, если он не указан или если предоставляется пустой массив? - person Andru; 14.04.2021
comment
Пустой массив - это never[], потому что машинописный текст не имеет информации об элементах, поэтому он принимает его как всегда пустой массив. Альтернатива - только any[] или unknown[], но это небезопасно, поэтому в строгом машинописном тексте она отключена. github.com/microsoft/TypeScript/pull/8944 - person Алексей Мартинкевич; 14.04.2021