反应：已获取数据，但无法访问对象属性

Question

我成功地从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）->

我添加了用于检查响应是否正常的代码，一切正常。

console.log（item）->

Answer 1

您的问题是您的界面。我没有意识到这是一个编译时错误，而不是运行时错误。

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

问题是您将Data.data定义为空数组，并且空数组的元素类型为never。这意味着item回调中的map()类型为never，并且never没有属性。

[您可能不希望Data.data成为any[]以外的东西，以便item具有强类型的值，但这应该可以解除对您的阻止。