useEffect without any params is equal to componentDidMount and for this reason, is called after the render.

So, the first time your jsx code is called, data.result.map is undefined and only after the re-render, do to the response of fetchShops(), it has a value.

You simply need to check the value like this:

data.result && data.result.map()

What you need is to map your array of objects and remember that every item will be an object, so that you will use for instance dot notation to take the values of the object.

In your component

 [
    {
        name: 'Sam',
        email: 'somewhere@gmail.com'
    },

    {
        name: 'Ash',
        email: 'something@gmail.com'
    }
].map((anObjectMapped, index) => {
    return (
        <p key={`${anObjectMapped.name}_{anObjectMapped.email}`}>
            {anObjectMapped.name} - {anObjectMapped.email}
        </p>
    );
})

And remember when you put an array of jsx it has a different meaning and you can not just put object in your render method as you can put an array.

Take a look at my answer at mapping an array to jsx

The dataList is an object and not an array. You cannot map through objects. And that's why you're getting this error.

You can use Object.values to get the value of object and consequently apply map on.

{Object.values(dataList).map(item => {
        return <Text>{item.title}</Text>;
      })}

render(){
   var api={"bar":"nihao"};
     return(
        <View>
        {Object.entries(api).map(([key,v])=>{
            return <View key={key}><Text>{v}</Text></View>
        })}
        </View>

      )

} api is a single object not array.

api is a array.

render(){
   var api=[{"bar":"nihao"},{"bar":"nihao2"},{"bar":"nihao3"}];
     return(
        <View>
        {api.map((v,index)=>{
             return <View key={index}><Text>{v.bar}</Text></View>
        })}
        </View>

      )

}

This should work:

WholeNews() {
  return tmp_array.map(function(news, i){
    return(
      <View key={i}>
        <Text>{news.headline}</Text>
        <View>
          <Text>{news.text}</Text>
        </View>
      </View>
    );
  });
}

render() {
  return(
    <View>
      {this.WholeNews()}
    </View>
  )
}

Don't forget to return the mapped array , like:

lapsList() {

    return this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })

}

Reference for the map() method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map