React typescript 属性“map”在“用户”类型上不存在答案

【问题标题】：React typescript Property 'map' does not exist on type 'User'React typescript 属性“map”在“用户”类型上不存在
【发布时间】：2020-12-11 15:46:23
【问题描述】：

我正在尝试将 react 与 typescript 一起使用。我已经用一个对象初始化了 useState，但不能对那个对象使用 map 函数。

这是我遇到的错误

“用户”类型上不存在属性“地图”

这里是代码。

提前谢谢你

    interface User  {
        name : string,
        email : string,
        stream_key : string,
    
    }
    
    const App = () => {
    const [liveStreams, setLiveStreams] = useState<User>({
            name : '',
            email : '',
            stream_key : ''
        })
    
    // setting livestreams
    const getStreamsInfo = (live_streams) => {
        axios.get('http://192.168.43.147:4000/streams/info', {
        }).then(res => {
            console.log(res.data)
            setLiveStreams({
                name: res.data.name,
                email: res.data.email,
                stream_key: res.data.stream_key
            })
        });
    }
    
    return (
    {liveStreams.map(data => <Text>{data.email}</Text>)}    
)

【问题讨论】：

您只有一个User 对象。你为什么要使用map？为什么你使用复数作为状态变量的名称？

标签： javascript reactjs typescript

【解决方案1】：

您只有一个 User 对象，而不是它们的数组。要么：

只使用对象（最好使用单数而不是复数作为状态变量的名称），或者
改为使用对象数组。

以#1 为例，如果您使用名称liveStream，它将如下所示：

return <Text>{liveStream.email}</Text>;

鉴于你已经说过

实际上 res.data 包含多个用户的数据。如何使用打字稿使用对象数组？对不起新手问题

在评论中，看起来你想要#2，这意味着：

将您的初始数据设为空数组。

 const [liveStreams, setLiveStreams] = useState<User[]>([]);
 // −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^−−^^

当您收到列表时，使用整个列表：

 const getStreamsInfo = (live_streams) => {
     axios.get('http://192.168.43.147:4000/streams/info', {
     }).then(res => {
         // To *replace* state with the list in `res.data`:
         setLiveStreams(res.data);
         // >>OR<< to **add to** the current state, appending the list from `res.data`:
         setLiveStreams(streams => [...streams, ...res.data]);
     });
 }

将key 属性添加到您的Text 元素，因为它们是数组中的条目。

【讨论】：

实际上 res.data 包含多个用户的数据。如何使用打字稿使用对象数组？抱歉新手问题
@pratikjaiswal - 什么，一个数组？
我已经使用 useState 设置了对象数组。感谢您的帮助

【解决方案2】：

在您的情况下，实际的解决方案是在尝试使用 map 方法之前使用类型保护来检查您是否有一个数组。

if (liveStreams instanceof Array) {
    liveStreams.map(data => <Text>{data.email}</Text>);
}

【讨论】：

【解决方案3】：

   interface User  {
        name : string,
        email : string,
        stream_key : string,
    
    }
    
    const App = () => {
    const [liveStreams, setLiveStreams] = useState<User[]>([{
            name : '',
            email : '',
            stream_key : ''
        }])
    
    // setting livestreams
    const getStreamsInfo = (live_streams) => {
        axios.get('http://192.168.43.147:4000/streams/info', {
        }).then(res => {
            console.log(res.data)
           // is the `res.data` an Array Object?
           // or u may just do like that 
           /*
            * const { data } = res
            * // if `data` type is user[]
            * setLiveStreams(data)
           */
            setLiveStreams([{
                name: res.data.name,
                email: res.data.email,
                stream_key: res.data.stream_key
            }])
        });
    }
    
    return (
    {liveStreams.map(data => <Text>{data.email}</Text>)}    
)

【讨论】：