React Native Flatlist ListItem wird nach dem ersten Rendern mehrmals aufgerufen

Question

Flatlist-Komponente wie unten

<FlatList
 data={this.state.data}
 keyExtractor={item => item.ID.toString()}
 renderItem={this.renderItem}
 onRefresh={this.onRefresh}
 refreshing={this.state.refreshing}
 ListFooterComponent={this.renderFooter}
/>

renderItem = ({ item }) => {
    return (
      <ListElement onPress={() => this.rowData(item)} item={item}/>
    );
  };

ListItem-Komponente

import React from "react";
import { Image } from "react-native";
import { Left, Right, Body, Text, ListItem } from "native-base";
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from "react-native-responsive-screen";
import Thumbnails from "../components/Thumbnails";
import styles from "../styles/HomeStyles";
import GlobalStyles from "../constants/GlobalStyles";

class ListElement extends React.Component {

  componentDidMount(){
    console.log(this.props.item.ID)
  }

  shouldComponentUpdate(){
    return false;
  }

  render() {
    return (
      <ListItem onPress={this.props.onPress} thumbnail style={styles.listItem}>
          <Left>
            <Thumbnails imageURI={require("../../assets/images/female2.png")} />
          </Left>
        <Body style={{ borderBottomColor: "transparent", top: 2 }}>
          <Text
            style={{
              fontFamily: GlobalStyles.primaryFont,
              fontSize: hp("1.85%"),
            }}
          >
            {this.props.item.FirstName} {this.props.item.LastName}
          </Text>
          <Text
            note
            style={{
              fontFamily: GlobalStyles.primaryFont,
              color: "#666666",
              fontSize: hp("1.6%"),
            }}
          >
            {this.props.item.Title}
          </Text>
        </Body>
        <Right>
          <Image
            style={styles.rightArrow}
            source={require("../../assets/images/arrowRight.png")}
          />
        </Right>
      </ListItem>
    );
  }
}

export default ListElement;

Ich habe versucht, API-Daten in die Flatlist aufzunehmen. Bitte beziehen Sie sich auf meinen obigen Code für die Implementierung. Derzeit habe ich Probleme mit dem erneuten Rendern, wie unten erwähnt.

Mein Listenelement componentDidMount wird beim Scrollen nach dem ersten Rendern aller Listenelemente mehrmals aufgerufen.

Ich habe PureComponent und shouldComponentUpdate ausprobiert. Danke im Voraus.

Answer 1

Ein Update

Bitte finden Sie den gesamten Code der Flatlist-Komponente

import React, { PureComponent } from "react";
import { View, FlatList } from "react-native";
import { ListItem } from "react-native-elements";
import FL from "../screens/FL";
import FL1 from "../screens/Fl1";

class FlatListDemo extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      error: null,
      refreshing: false,
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const url = `https://jsonplaceholder.typicode.com/posts`;
    this.setState({ loading: true });

    fetch(url)
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          data: res,
          error: res.error || null,
          loading: false,
          refreshing: false,
        });
      })
      .catch((error) => {
        this.setState({ error, loading: false });
      });
  };

  renderItem = ({ item }) => {
    return <ListElement onPress={() => this.rowData(item)} item={item} />;
  };

  render() {
    if (this.state.loading === true) {
      return <View></View>;
    } else {
      return (
        <View>
          <FlatList
            data={this.state.data}
            keyExtractor={(item) => item.ID.toString()}
            renderItem={this.renderItem}
            onRefresh={this.onRefresh}
            refreshing={this.state.refreshing}
            ListFooterComponent={this.renderFooter}
          />
        </View>
      );
    }
  }
}

export default FlatListDemo;

Answer 2

Versuche Folgendes:

add, um einen booleschen Wert anzugeben (Sie können ihn "wasFetched" nennen).

Ändern Sie dann den componentDidMount wie folgt:

componentDidMount() {
     if(this.state.wasFetched === false) {
          this.setState({ wasFetched: true }, () => this.makeRemoteRequest())
     }
}