如何在 React-Native 中通過 fetch() 從函數返回數據

Question

我為我的帖子創建了一個 FlastList，我在其中調用了一個用於返回帖子之類的函數，但它給了我一個錯誤：

[Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.
    in RCTView (at Testing.js:196)
    in TouchableWithoutFeedback (at Testing.js:185)
    in RCTView (at Testing.js:184)
    in RCTView (at Testing.js:165)
    in TouchableWithoutFeedback (at Testing.js:160)
    in RCTView (at VirtualizedList.js:1925)
    in CellRenderer (at VirtualizedList.js:767)
    in RCTView (at ScrollView.js:1038)
    in RCTScrollView (at ScrollView.js:1178)
    in ScrollView (at VirtualizedList.js:1183)
    in VirtualizedList (at FlatList.js:676)
    in FlatList (at Testing.js:151)
    in RCTView (at Testing.js:147)
    in Testing
    in SceneView (at StackView.tsx:269)
    in RCTView (at CardContainer.tsx:171)
    in RCTView (at CardContainer.tsx:170)
    in RCTView (at Card.tsx:455)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:442)
    in PanGestureHandler (at Card.tsx:435)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:431)
    in RCTView (at Card.tsx:424)
    in Card (at CardContainer.tsx:138)
    in CardContainer (at CardStack.tsx:503)
    in RCTView (at CardStack.tsx:110)
    in MaybeScreen (at CardStack.tsx:496)
    in RCTView (at CardStack.tsx:93)
    in MaybeScreenContainer (at CardStack.tsx:403)
    in CardStack (at StackView.tsx:384)
    in KeyboardManager (at StackView.tsx:382)
    in RNCSafeAreaView (at src/index.tsx:26)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:34)
    in SafeAreaProviderCompat (at StackView.tsx:379)
    in StackView (at StackView.tsx:41)
    in StackView (at createStackNavigator.tsx:33)
    in Unknown (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:430)
    in NavigationContainer (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)]

fetch() 工作正常，我得到了喜歡，但是當我返回數據時，我得到了那個錯誤。 我不明白為什么我會收到這個錯誤，它會如何刪除以及我將如何在我的應用程序上獲得帖子。

這是我的代碼。

likes = async item => {
    const response = await fetch(
      'http://192.168.0.3:1234/post_likes?post_id=' + item.id,
    );
    const data = await response.json();
    let likes = data[0].likes;
    console.log(likes);
    return <Text>{likes}</Text>;
  };

  render() {
    return (
      <View style={styles.container}>
        <HeaderIcon />
        {this.state.loading && <ActivityIndicator size="large" color="cyan" />}

        <FlatList
          onScroll={({nativeEvent}) => {
            if (this.isCloseToBottom(nativeEvent)) {
              this.getMorePost();
            }
          }}
          data={this.state.post}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({item}) => (
            <TouchableWithoutFeedback
              style={styles.main}
              onPress={() => {
                this.openPost(item);
              }}>
              <View style={styles.main}>
                <View style={styles.row}>
                  {/* <View>{this.img(item)}</View> */}
                  <View>
                    <Image
                      style={styles.profilePic}
                      source={{uri: item.featuredImage}}
                    />
                  </View>

                  <View>
                    <Text style={styles.title}>{item.post_title}</Text>
                  </View>
                </View>
                <Image
                  // resizeMode="stretch"
                  style={styles.image}
                  source={{uri: item.featuredImage}}
                />
                <View>
                  <TouchableWithoutFeedback
                    onPress={() => {
                      Share.share({
                        title: item.post_title,
                        message:
                          item.section_seo_url +
                          item.post_content.replace(/<[^>]*>|&nbsp;/g, ' ') +
                          item.featuredImage,
                        url: item.featuredImage,
                      });
                    }}>
                    <View
                      style={{
                        justifyContent: 'center',
                        padding: 10,
                        flexDirection: 'row',
                      }}>
                      <Image
                        source={require('../image/wlogo.png')}
                        style={{height: 40, width: 40, paddingLeft: 50}}
                      />
                      {this.likes(item)}
                    </View>
                  </TouchableWithoutFeedback>
                </View>
              </View>
            </TouchableWithoutFeedback>
          )}
        />
      </View>
    );
  }
}

Answer 1

按照我的說法，您正在進行多個 api 調用

Instead of that you can get your posts data with your likes from backend in simple 
one api call.

You just need to add join query with your likes table in your get-posts request 
which will return all your post with likes 

So, you will get your all post with likes in one api call instead of these much 
of calls.

Which is good practise for us.it will increase your app performance as well as
less api calls so it is good for server as well 

解決方案就像

 add one more field likes to your post table 

 what you can do is when user like/dislike your post then get your likes
 from post table and increment by one else decrement by one as per user 
 like/dislike and update back to post table.