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

Question

I am trying to use react with typescript. I have initialized useState with an object but can't use map function with that object.

Here is the error I am getting

Property 'map' does not exist on type 'User'

Here is the code.

Thank you in advance

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

Answer 1

You only have a single User object, not an array of them. Either:

1. Just use the object (and ideally use the singular rather than the plural for the name of the state variable), or

2. Use an array of objects instead.

With #1, for instance, if you used the name liveStream , it would look like this:

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

---

Given that you've said

Actually res.data contains data of multiple users. How to use array of objects using typescript? Sorry for newbie questio

in a comment, it looks like you want #2, which means:

1. Make your initial data an empty array.

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

2. When you receive the list, use the whole list:

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

3. Add key attributes to your Text elements, since they're entries in an array.

Answer 2

In your case, the actual solution will be to use a type guard to check that you have an array before attempting to use the map method.

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

Answer 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>)}    
)