admin管理员组文章数量:1327475
I want to make a get
request for each item in my renderItems()
so I make it like this:
renderItems({ item }) {
axios.get(Utilities.url + "Symbol/" + item.Id).then(response => {
let eachItem = response.data;
});
console.log(eachItem);
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "flex-end",
alignSelf: "stretch",
marginRight: 2
}}
>
<Text
style={{
color: Colors.WHITE,
fontSize: 16
}}
>
{eachItem.LVal18AFC}
</Text>
</View>
);
}
But I get the error for:
ReferenceError: eachItem is not defined
I tried to convert the renderItems
to an async
function and use await
but I get another error!
Any solution...?
UPDATE
I used var eachItem = []
outside the axios' then function but now I'm getting:
TypeError: Cannot read property 'LVal18AFC' of undefined!
I want to make a get
request for each item in my renderItems()
so I make it like this:
renderItems({ item }) {
axios.get(Utilities.url + "Symbol/" + item.Id).then(response => {
let eachItem = response.data;
});
console.log(eachItem);
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "flex-end",
alignSelf: "stretch",
marginRight: 2
}}
>
<Text
style={{
color: Colors.WHITE,
fontSize: 16
}}
>
{eachItem.LVal18AFC}
</Text>
</View>
);
}
But I get the error for:
ReferenceError: eachItem is not defined
I tried to convert the renderItems
to an async
function and use await
but I get another error!
Any solution...?
UPDATE
I used var eachItem = []
outside the axios' then function but now I'm getting:
Share Improve this question edited Oct 25, 2018 at 7:59 MoKhajavi75 asked Oct 25, 2018 at 7:40 MoKhajavi75MoKhajavi75 2,7125 gold badges31 silver badges57 bronze badges 5TypeError: Cannot read property 'LVal18AFC' of undefined!
-
Put
let eachItem
outsideaxios
first, you are not in same scope. – MatrixTXT Commented Oct 25, 2018 at 7:45 -
I use
var
outside the function but now I'm getting error for `Cannot read property 'InsCode' of undefined! – MoKhajavi75 Commented Oct 25, 2018 at 7:54 - Hey, are you making this call inside your render function? You cannot make async calls inside the render function. – Yash Kalwani Commented Oct 25, 2018 at 8:05
- @YashKalwani - No! the items are dynamic so I have to make request for each! – MoKhajavi75 Commented Oct 25, 2018 at 8:07
-
The question says FlatList makes get request. Your FlatList has to be inside the render function. And the FlatList makes the async call. Hence, you are making a async call inside the
render
of your class which won't work. – Yash Kalwani Commented Oct 25, 2018 at 8:21
3 Answers
Reset to default 4@Jigar is correct.
Why it is not working:
When you call the renderItems
function js looks at the asyn call and puts it into its event loop for execution later. It then moves on and logs to your console eachItem
which is undefined right now. Then renders your JSX and then executes the async call ( i.e axios request ) when the request serves the data back it is simply store in eachItem
which is in the scope of the axios function.
you did a bad practice in calling API, what I suggest is, create a separate ponent for each row you want to display and inside a row call an API you want
so according to your code
class Row extends Component {
constructor() {
super()
this.state = {
eachItem: null
}
}
ponentDidMount() {
const { item } = this.props;
axios.get(Utilities.url + "Symbol/" + item.Id).then(response => {
this.setState({eachItem: response.data});
});
}
render() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "flex-end",
alignSelf: "stretch",
marginRight: 2
}}
>
<Text
style={{
color: Colors.WHITE,
fontSize: 16
}}
>
{this.state.eachItem ? this.state.eachItem.LVal18AFC : null}
</Text>
</View>
);
}
}
This is a scoping issue. Using the let
keyword in the function passed to your GET
promise, means it's only accessible inside that function.
I'd actually suggest abstracting things into a ponent, which will manage its own respective axios call. Something like this:
class Item {
ponentWillMount(props) {
axios.get(Utilities.url + "Symbol/" + props.Id).then(response => {
this.setState({
data: {
...this.state.data,
...response.data,
})
});
}
render() {
if (!this.state.data) {
return null;
}
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "flex-end",
alignSelf: "stretch",
marginRight: 2
}}
>
<Text
style={{
color: Colors.WHITE,
fontSize: 16
}}
>
{ this.state.data.id }
</Text>
</View>
);
}
}
function Parent(props) {
<FlatList renderItem={ ({ item }) => <Item id={ item.id } /> } />
}
本文标签: javascriptReact NativeFlatList make get request for each item in renderItemsStack Overflow
版权声明:本文标题:javascript - React Native - FlatList make get request for each item in renderItems - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742207120a2433023.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论