Hi i have this wierd problem in which i can access property ooPP
on state object but can not access property data
of state objects. the only difference is how they are populated.
state.ooPP
is hardcoded state.data
is set after calling few functions . i can see value of state.data
as array with one element in react native dev tools
but why is this.state.data
null in render()
?
here is the code:
export default class HomeScreen extends Component {
_retrieveData = async key => {
try {
const value = await AsyncStorage.getItem(key);
if (value !== null) {
// We have data!!
console.log("yay....", value);
return value;
}
} catch (error) {
// Error retrieving data
}
};
getAllKeys = async () => {
let keys = [];
try {
keys = await AsyncStorage.getAllKeys();
} catch (e) {
// read key error
}
return keys;
};
constructor(props) {
super(props);
this.state = {
data:[],
kk:'oo',
ooPP:[{'username':'uuuuu'}]
}
this.getAllKeys().then(keys => {
var promises = keys.map(key => {
return this._retrieveData(key)
.then(value => {
console.log(value, "xx");
return JSON.parse(value);
})
.catch(error => {
//
});
});
Promise.all(promises)
.then(results => {
this.state.data=results
})
.catch(e => {
//
});
});
}
renderSeparator = () => {
return (
<View
style={{
height: 1,
backgroundColor: "#CED0CE"
}}
/>
);
};
render = () => {
return (
<View>
<FlatList
data={this.state.data} //-------> this is not accessible
ItemSeparatorComponent={this.renderSeparator}
renderItem={({ item }) => (
<TOTPItem value={item.username} time={(20 / 30) * 100} />
)}
/>
<Text>dd {this.state.kk}</Text>
</View>
);
}
}
Promise.all(promises)
.then(results => {
this.setState({data: results});
})
.catch(e => {
//
});
});
You need to use setState
to update state.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.