javascript - 设置状态后如何避免高估项目？

Question

我有一个函数可以从 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()}
/>

Answer 1

好的，首先是关于那个记录器:

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 版本的解决方案，如果它不会对您的应用程序产生负面影响的话。

希望对你有所帮助。