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

Question

我有一个从 firebase 获取数据的功能， 我想在获取后将数据设置为状态， 所以我只是声明一个数组并将所有数据推送给他们，然后我用我的状态设置这个数组

但是当我记录这些状态或渲染它时，我遇到了 RN 0.61.2 的一些问题，它在 RN 0.58.0 中完美运行我不知道为什么/如何！！！

当我记录状态时，我只看到高估的数据“我在 DB 中只有 4 个项目”，但记录器向我打印了十多个， 当我只是渲染这些数据“状态”时，他们会告诉我

NSNumber 类型的 JSON 值“5”无法转换为 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

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

NSNumber 类型的 JSON 值“5”无法转换为 Nsstring

这个错误是因为keyExtractor 需要一个字符串作为返回值。所以，为了避免它，你可以试试这个：

<FlatList
    keyExtractor={(item, index) => 'item' + index}
/>

最后，关于你的日志：

我用你的要点创建了一个博览会的小吃，它的 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 版本的解决方案。

希望对你有所帮助。