初始呈现后，React Native Flatlist ListItem被调用了多次

问题描述

Flatlist组件如下

<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组件

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;

我试图在清单上填充api数据。请参考我上面的代码进行实施。目前，我面临着如下所述的重新渲染问题。

我的listitem componentDidMount甚至在对所有listitem进行初次渲染后都滚动调用了多次。

我尝试过PureComponent和shouldComponentUpdate。预先感谢。

解决方法

更新

请找到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,});
      })
      .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;

尝试以下操作：

添加以声明布尔值（您可以将其命名为“ wasFetched”）。

然后按如下所示更改componentDidMount：

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

javascript listitem listitem react-native react-native react-native-flatlist

初始呈现后，React Native Flatlist ListItem被调用了多次

问题描述

解决方法

相关问答