在初始渲染后多次调用 React Native Flatlist ListItem

Question

Flatlist component as below平面列表组件如下

<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 Component列表项组件

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;

I tried to populate api data on the flatlist.我试图在 flatlist 上填充 api 数据。 Please refer my above code for implementation.请参考我上面的代码实现。 Currently I am facing rerendering issues as mentioned below.目前我正面临如下所述的重新渲染问题。

My listitem componentDidMount is invoking multiple times on scroll after even intial render of all listitems.我的列表项 componentDidMount 甚至在所有列表项的初始渲染之后都在滚动时多次调用。

I have tried PureComponent and shouldComponentUpdate.我已经尝试过 PureComponent 和 shouldComponentUpdate。 Thanks in advance.提前致谢。

Answer 1

An Update更新

Please Find the entire code of Flatlist component请找到Flatlist组件的完整代码

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

Try the following:请尝试以下操作：

add to state a boolean value (you can name it "wasFetched").添加以声明一个布尔值（您可以将其命名为“wasFetched”）。

Then change the componentDidMount like this:然后像这样更改 componentDidMount：

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

在初始渲染后多次调用 React Native Flatlist ListItem

问题描述

2 个解决方案

解决方案1
0 2020-08-26 09:22:43

解决方案2
0 2020-08-26 09:34:17

在初始渲染后多次调用 React Native Flatlist ListItem

问题描述

2 个解决方案

解决方案1 0 2020-08-26 09:22:43

解决方案2 0 2020-08-26 09:34:17

解决方案1
0 2020-08-26 09:22:43

解决方案2
0 2020-08-26 09:34:17