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

Question

这是我的帖子页面代码，它在加载时从我的 API 获取帖子标题，这很完美。问题是，一旦它被加载，如果一个新帖子被添加到 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');

  }

 );

};