我正在将一些api数据提取到Google地图标记中......我是ReactJS的新手，最近两天我一遍又一遍地得到相同的错误，但我真的不知道如何解决它。 有人可以帮我吗？ （另外，如果我做错了，我的第一个在这里做任何问题对不起）
class maps extends Component{ constructor(props){ super(props) this.state = { Objects: [] } } componentWillMount(){ axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu') .then( res => { console.log(res); this.setState({Objects: res}) }) .catch(error => { console.log('Error fetching and parsing data', error); }); } render(){ const MyMapComponent = withScriptjs(withGoogleMap((props) => <GoogleMap defaultZoom={2} defaultCenter={{ lat: 40.6333333, lng: -8.65 }} > { this.state.Objects.map(function(Objects, i) { return( <Marker position={{ lat: Objects.data.Objects.location.coodinates[i], lng: Objects.data.Objects.location.coodinates[i] }} /> ) }) } {props.isMarkerShown && <Marker position={{ lat: 40.6333333, lng: -8.65 }} />} {props.isMarkerShown && <Marker position={{ lat: 40.627467, lng: -8.64912 }} />} </GoogleMap> )) }TypeError：_this3.state.Objects.map不是函数
}
非常感谢 ！
I'm fetching some api data to google maps markers... I'm pretty newbie at ReactJS and last 2 days I'm getting the same error over and over again and I dont really know how to solve it. anyone can help me here? (also, its my 1st doing any kind of question here sorry if I'm doing something wrong)
class maps extends Component{ constructor(props){ super(props) this.state = { Objects: [] } } componentWillMount(){ axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu') .then( res => { console.log(res); this.setState({Objects: res}) }) .catch(error => { console.log('Error fetching and parsing data', error); }); } render(){ const MyMapComponent = withScriptjs(withGoogleMap((props) => <GoogleMap defaultZoom={2} defaultCenter={{ lat: 40.6333333, lng: -8.65 }} > { this.state.Objects.map(function(Objects, i) { return( <Marker position={{ lat: Objects.data.Objects.location.coodinates[i], lng: Objects.data.Objects.location.coodinates[i] }} /> ) }) } {props.isMarkerShown && <Marker position={{ lat: 40.6333333, lng: -8.65 }} />} {props.isMarkerShown && <Marker position={{ lat: 40.627467, lng: -8.64912 }} />} </GoogleMap> )) }TypeError: _this3.state.Objects.map is not a function
}
Thanks a lot !
最满意答案
Objects.map不是一个函数，因为Objects不是一个数组。
在componentWillMount()函数中： axios.get()请求返回的res变量是一个包含额外信息（如headers和status text axios.get()的object 。
你实际上的data在该object 。 请参阅下面有关如何提取所述数据的示例。
axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu').then((response) => { const { Objects } = response.data // Extract Objects From Data. return this.setState({ Objects }) // Update Component State. }).catch((error) => console.log('Error fetching and parsing data', error))有关更多信息，请参阅Axios文档 。
Objects.map is not a function because Objects is not an array.
Within your componentWillMount() function: the res variable returned by the axios.get() request is an object containing extra info such as headers and status text.
The data you're actually after is within that object. See below for an example of how you might extract said data.
axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu').then((response) => { const { Objects } = response.data // Extract Objects From Data. return this.setState({ Objects }) // Update Component State. }).catch((error) => console.log('Error fetching and parsing data', error))See the Axios docs for further info.
ReactJS TypeError：_this3.state.Objects.map不是函数(ReactJS TypeError: _this3.state.Objects.map is not a function)我正在将一些api数据提取到Google地图标记中......我是ReactJS的新手，最近两天我一遍又一遍地得到相同的错误，但我真的不知道如何解决它。 有人可以帮我吗？ （另外，如果我做错了，我的第一个在这里做任何问题对不起）
class maps extends Component{ constructor(props){ super(props) this.state = { Objects: [] } } componentWillMount(){ axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu') .then( res => { console.log(res); this.setState({Objects: res}) }) .catch(error => { console.log('Error fetching and parsing data', error); }); } render(){ const MyMapComponent = withScriptjs(withGoogleMap((props) => <GoogleMap defaultZoom={2} defaultCenter={{ lat: 40.6333333, lng: -8.65 }} > { this.state.Objects.map(function(Objects, i) { return( <Marker position={{ lat: Objects.data.Objects.location.coodinates[i], lng: Objects.data.Objects.location.coodinates[i] }} /> ) }) } {props.isMarkerShown && <Marker position={{ lat: 40.6333333, lng: -8.65 }} />} {props.isMarkerShown && <Marker position={{ lat: 40.627467, lng: -8.64912 }} />} </GoogleMap> )) }TypeError：_this3.state.Objects.map不是函数
}
非常感谢 ！
I'm fetching some api data to google maps markers... I'm pretty newbie at ReactJS and last 2 days I'm getting the same error over and over again and I dont really know how to solve it. anyone can help me here? (also, its my 1st doing any kind of question here sorry if I'm doing something wrong)
class maps extends Component{ constructor(props){ super(props) this.state = { Objects: [] } } componentWillMount(){ axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu') .then( res => { console.log(res); this.setState({Objects: res}) }) .catch(error => { console.log('Error fetching and parsing data', error); }); } render(){ const MyMapComponent = withScriptjs(withGoogleMap((props) => <GoogleMap defaultZoom={2} defaultCenter={{ lat: 40.6333333, lng: -8.65 }} > { this.state.Objects.map(function(Objects, i) { return( <Marker position={{ lat: Objects.data.Objects.location.coodinates[i], lng: Objects.data.Objects.location.coodinates[i] }} /> ) }) } {props.isMarkerShown && <Marker position={{ lat: 40.6333333, lng: -8.65 }} />} {props.isMarkerShown && <Marker position={{ lat: 40.627467, lng: -8.64912 }} />} </GoogleMap> )) }TypeError: _this3.state.Objects.map is not a function
}
Thanks a lot !
最满意答案
Objects.map不是一个函数，因为Objects不是一个数组。
在componentWillMount()函数中： axios.get()请求返回的res变量是一个包含额外信息（如headers和status text axios.get()的object 。
你实际上的data在该object 。 请参阅下面有关如何提取所述数据的示例。
axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu').then((response) => { const { Objects } = response.data // Extract Objects From Data. return this.setState({ Objects }) // Update Component State. }).catch((error) => console.log('Error fetching and parsing data', error))有关更多信息，请参阅Axios文档 。
Objects.map is not a function because Objects is not an array.
Within your componentWillMount() function: the res variable returned by the axios.get() request is an object containing extra info such as headers and status text.
The data you're actually after is within that object. See below for an example of how you might extract said data.
axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu').then((response) => { const { Objects } = response.data // Extract Objects From Data. return this.setState({ Objects }) // Update Component State. }).catch((error) => console.log('Error fetching and parsing data', error))See the Axios docs for further info.
发布评论