我有一个函数可以从 firebase 获取数据, 我想在获取后将数据设置为一种状态, 所以我只声明一个数组并将所有数据推送给它们,然后我用我的状态设置这个数组
但是当我记录这些状态或渲染它时,我在 RN 0.61.2 中遇到了一些问题,它在 RN 0.58.0 中工作完美我不知道为什么/如何!!!
当我记录状态时,我只看到被高估的数据“我在数据库中只有 4 个项目”,但记录器打印给我的超过几十个, 当我只是呈现这些数据“状态”时,他们告诉我
JSON value "5" of type NSNumber cannot be converted to Nsstring
那我该如何避免呢?
这是我的代码片段
this.state = {
RecommendedProviders: [],
}
componentDidMount() {
this._recommendedProvider();
}
_recommendedProvider = () => {
let Recommended = [];
firebase
.database()
.ref('recommendationProviders')
.once('value')
.then(snapshot => {
snapshot.forEach(childSnapshot => {
Recommended.push({
gKey: childSnapshot.key,
id: childSnapshot.val().id,
username: childSnapshot.val().username,
service: childSnapshot.val().service,
aboutMe: childSnapshot.val().aboutMe,
coordinates: {
longitude: childSnapshot.val().coordinates.longitude,
latitude: childSnapshot.val().coordinates.latitude,
},
city: childSnapshot.val().city,
mobileNumber: childSnapshot.val().mobileNumber,
token: childSnapshot.val().token._55,
});
});
console.log('Recommended', Recommended); //when i log this i can just see array of 4 item
this.setState({RecommendedProviders: Recommended});
});
// .then(() => this.setState({RecommendedProviders: Recommended}));
};
界面
<FlatList
horizontal
data={this.state.RecommendedProviders}
renderItem={({item}) => {
console.log('@item/', item); /when i log this i can just see more than 4 item maybe 20 :D
}}
keyExtractor={(item, index) => index.toString()}
/>
最佳答案
好的,首先是关于那个记录器:
JSON value "5" of type NSNumber cannot be converted to Nsstring
此错误是因为 keyExtractor
需要一个字符串作为返回值。所以,为了避免它,你可以试试这个:
<FlatList
keyExtractor={(item, index) => 'item' + index}
/>
最后,关于你的日志:
我用你的gist创建了一个expo的snack,SDK是基于react-native 0.59的,你可以看看here .我还尝试使用下面的代码模拟您的异步获取,它运行良好。
new Promise((resolve, reject) => {
setTimeout(resolve, 2000, [
{ id: 1, username: 'test', service: 'example' },
{ id: 2, username: 'test', service: 'example' },
{ id: 3, username: 'test', service: 'example' },
{ id: 4, username: 'test', service: 'example' },
]);
}).then(res => {
const providers = [];
res.forEach(item => providers.push(item));
this.setState({ RecommendedProviders: providers }, () =>
console.log('object', this.state.RecommendedProviders)
);
});
我相信这可能是降级 RN 版本的解决方案,如果它不会对您的应用程序产生负面影响的话。
希望对你有所帮助。
关于javascript - 设置状态后如何避免高估项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58459176/