Javascript React typescript属性'；地图'；不存在于类型'；用户'；

我正在尝试使用react with typescript。我已使用对象初始化useState，但无法对该对象使用映射函数

这是我得到的错误

类型“User”上不存在属性“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>)}    
)

用户界面{
名称：string，
电子邮件：string，
stream_键：string，
}
常量应用=（）=>{
const[liveStreams，setLiveStreams]=useState({
名称：“”，
电子邮件：“”，
流\u键：“”
})
//设置livestreams
const getStreamsInfo=（实时流）=>{
axios.get（）http://192.168.43.147:4000/streams/info', {
})。然后（res=>{
console.log（res.data）
setLiveStreams({
名称：res.data.name，
电子邮件：res.data.email，
stream\u key:res.data.stream\u key
})
});
}
返回(
{liveStreams.map（数据=>{data.email}）}
)

您只有一个

用户

对象，而不是它们的数组。或者：

仅使用对象（理想情况下，状态变量的名称使用单数而不是复数），或者

改为使用对象数组

例如，对于#1，如果您使用名称

liveStream

，它将如下所示：

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

返回{liveStream.email}；

---

既然你这么说

---

事实上，res.data包含多个用户的数据。如何使用typescript使用对象数组？很抱歉有新问题

在一条评论中，您似乎想要#2，这意味着：

将初始数据设置为空数组

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

const[liveStreams，setLiveStreams]=useState（[]）；
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^−−^^

收到列表时，请使用整个列表：

 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]);
     });
 }

const getStreamsInfo=（实时流）=>{
axios.get（）http://192.168.43.147:4000/streams/info', {
})。然后（res=>{
//要用“res.data”中的列表*替换*状态，请执行以下操作：
setLiveStreams（res.data）；
//>>或[…流，…存储数据]；
});
}

将

键

属性添加到

文本

元素中，因为它们是数组中的条目

---

您只有一个

用户
对象，而不是它们的数组。或者：

仅使用对象（理想情况下，状态变量的名称使用单数而不是复数），或者


改为使用对象数组


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

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

返回{liveStream.email}；


既然你这么说

事实上，res.data包含多个用户的数据。如何使用typescript使用对象数组？很抱歉有新问题

在一条评论中，您似乎想要#2，这意味着：

将初始数据设置为空数组

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

const[liveStreams，setLiveStreams]=useState（[]）；
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^−−^^


收到列表时，请使用整个列表：

 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]);
     });
 }

const getStreamsInfo=（实时流）=>{
axios.get（）http://192.168.43.147:4000/streams/info', {
})。然后（res=>{
//要用“res.data”中的列表*替换*状态，请执行以下操作：
setLiveStreams（res.data）；
//>>或[…流，…存储数据]；
});
}


将
键
属性添加到
文本
元素中，因为它们是数组中的条目


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

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

if（liveStreams数组实例）{
liveStreams.map（数据=>{data.email}）；
}
在您的情况下，实际的解决方案是在尝试使用map方法之前，使用类型保护来检查您是否拥有数组

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

if（liveStreams数组实例）{
liveStreams.map（数据=>{data.email}）；
}
用户界面{
名称：string，
电子邮件：string，
stream_键：string，
}
常量应用=（）=>{
const[liveStreams，setLiveStreams]=useState([{
名称：“”，
电子邮件：“”，
流\u键：“”
}])
//设置livestreams
const getStreamsInfo=（实时流）=>{
axios.get（）http://192.168.43.147:4000/streams/info', {
})。然后（res=>{
console.log（res.data）
//`res.data`是数组对象吗？
//或者你也可以这样做
/*
*常量{data}=res
*//如果“数据”类型为用户[]
*setLiveStreams（数据）
*/
setLiveStreams([{
名称：res.data.name，
电子邮件：res.data.email，
stream\u key:res.data.stream\u key
}])
});
}
返回(
{liveStreams.map（数据=>{data.email}）}
)
用户界面{
名称：string，
电子邮件：string，
stream_键：string，
}
常量应用=（）=>{
const[liveStreams，setLiveStreams]=useState([{
名称：“”，
电子邮件：“”，
流\u键：“”
}])
//设置livestreams
const getStreamsInfo=（实时流）=>{
axios.get（）http://192.168.43.147:4000/streams/info', {
})。然后（res=>{
console.log（res.data）
//`res.data`是数组对象吗？
//或者你也可以这样做
/*
*常量{data}=res
*//如果为'data'类型