Question

这是我的帖子页面代码，它在加载时从我的API中获取帖子标题，效果很好。问题在于，一旦加载了新的帖子后，即使我的onRefresh函数可以正常工作，因为我可以在其中触发警报，所以我也没有刷新新的帖子。

我可以在API中获得新帖子以在加载后显示的唯一方法是重新加载应用程序本身。

componentDidMount() {
    this.fetchData()
  }

  constructor(props) {
    super(props);
    this.state = {
      refreshing: true,
      data: []
    };
  }

fetchData = () => {
    const url = 'myAPIurl';
    fetch(url)
      .then(res => {
        return res.json()
      })
      .then(res => {
        const arrayData = [...this.state.data, ...res]
        this.setState({
          data: arrayData,
          refreshing: false
        });
      })
      .catch(error => {
        console.log(error);
        this.setState({ refreshing: false });
      });
  };


handleRefresh = () => {
  this.setState(
    {
      refreshing: true
    },
    () => {
      this.fetchData();
      alert('Pulled Up to Refresh');
    }
  );
};


  render() {
    return (

<View>
      <FlatList
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this.handleRefresh}
          />
        }
        horizontal={false}
        data={this.state.data}
        keyExtractor={item => item.id}
        renderItem={({ item }) =>
    <View>
          <Text>{item.title.rendered}</Text>
     </View>
        }
      />
</View>
    );
  }
}

当我向上拉刷新时，会收到以下警告：两个孩子使用相同的键。键应该是唯一的。这很奇怪，因为每个帖子ID都是唯一的。即使出现此警告，除非重新加载应用程序，否则API中的新帖子不会显示。

Answer 1

按如下所示更改您的handleRefresh函数：

handleRefresh = () => {
this.setState(
{
  refreshing: true,
  data:[]
},
() => {
  this.fetchData();
  alert('Pulled Up to Refresh');
  }
 );
};

React Native Flatlist在上拉时不刷新数据

1 个答案: