Реакция: извлеченные данные, но нет доступа к свойствам объекта - PullRequest
Новая
       10

Реакция: извлеченные данные, но нет доступа к свойствам объекта

0 голосов
/ 08 апреля 2020

Я успешно получил данные из вызова API, в консоли вижу результат, но не могу получить доступ к свойствам объекта или отобразить их. 

interface Data {
    data: []
    isLoading: boolean
}
function About() {

    const  [ dataUser, setDataUser ] = useState<Data>({data: [], isLoading: false})

    useEffect(() => {
        setDataUser({data: [], isLoading: true})

        fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => {
            if (!response.ok) {
                throw new Error("Failed with HTTP code " + response.status);
            }
            return response;
        })
        .then(response => response.json())
        .then(data => setDataUser( {data: data, isLoading: false} ))
        .catch((err) => {console.log(err)})
    }, [])

    const user = dataUser.data.map(item => { 
        console.log(item)        //works
        console.log(item.id)     //doesn't work (error: "Property 'id' does not exist on type 'never'.")
        return (<li>{item.name}</li>)   //another error ("Objects are not valid as a React child...")
    })

    return (
        <div>
            {user}
        </div>
    )
}

export default About

РЕДАКТИРОВАТЬ

console.log (dataUser.data) -> enter image description here

Я добавил код для проверки правильности ответа и с этим все в порядке.

console.log (item) -> enter image description here

1 Ответ

1 голос
/ 08 апреля 2020

Ваша проблема - ваш интерфейс. Я не осознавал, что это ошибка времени компиляции, а не ошибка времени выполнения. 

interface Data {
    data: any[],
    isLoading: boolean,
}

Проблема в том, что вы определяете Data.data как пустой массив, а элементы пустой массив имеет тип never. Это означает, что item в вашем map() обратном вызове имеет тип never, а never не имеет свойств.

Возможно, вы хотите, чтобы Data.data был чем-то отличным от any[], так что item имеет строго типизированные значения, но это должно разблокировать вас.

...