如何在 React Native 中添加现有状态的新数据？

Question

我正在尝试实现分页。我在每个 fetch request 中获取 10 个项目的数组，并在调用列表视图 onEndReached 时将它们保存在状态中我正在获取下一个项目等等。

我的问题是，当我获取下一组项目时，上一次获取的项目保存在它们正在消失的状态中。当我更新状态时，仅显示当前获取的项目。

我希望上一次提取的项目不应该在下一次提取时消失。我可以将新项目附加到现有状态吗？如果是，我该怎么做？

如果我出错了，那么我该如何使用我不知道的 React Native 的任何组件来实现这一点？

这是我的代码

constructor(props) {
    super(props);
    this.state = {
        next: "",
        qwerty: []
    };
    this.fetchData = this.fetchData.bind(this);
}

fetchData() {
    return fetch('https://shopconapp.herokuapp.com/api/pagination/')

        .then((response) => response.json())
        .then((responseData) => {
            if (!responseData) {
                navigate("Login");
            } else {
                console.log(responseData);

                let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
                this.setState({
                    nexturl: responseData.next,
                    qwerty: ds.cloneWithRows(responseData.results.post),
                });
            }
        })
}

_onEndReached(){

    url = this.state.nexturl;

    return fetch(this.state.nexturl)

        .then((response) => response.json())
        .then((responseData) => {
            if (!responseData) {
                navigate("Login");
            } else {
                console.log(responseData);

                let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
                this.setState({
                    nexturl: responseData.next,
                    qwerty: ds.cloneWithRows(responseData.results.post),
                });

            }
        })
}

<ListView
    dataSource={this.state.qwerty}
    onEndReachedThreshold={2}
    onEndReached={this._onEndReached.bind(this)}
/>

Answer 1

您可以使用 ES6 语法来更新数组：

let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
   nexturl: responseData.next,
   qwerty: ds.cloneWithRows([...this.state.qwerty, ...responseData.results.post]),
});

Answer 2

将 posts 添加到您的州

this.state = {
    next: "",
    posts : []
    qwerty: []
};

为 fetchData 方法保存帖子的状态

fetchData() {
    return fetch('https://shopconapp.herokuapp.com/api/pagination/')

        .then((response) => response.json())
        .then((responseData) => {
            if (!responseData) {
                navigate("Login");
            } else {
                console.log(responseData);

                let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
                this.setState({
                    nexturl: responseData.next,
                    posts : responseData.results.post ,
                    qwerty: ds.cloneWithRows(responseData.results.post),
                });
            }
        })
}

现在 onEndReach 将新帖子附加到以前的帖子，并使您的数据源来自状态

_onEndReached(){

    url = this.state.nexturl;

    return fetch(this.state.nexturl)

        .then((response) => response.json())
        .then((responseData) => {
            if (!responseData) {
                navigate("Login");
            } else {
                console.log(responseData);

                let posts = this.state.posts.concat(responseData.results.post);

                let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
                this.setState({
                    nexturl: responseData.next,
                    posts : posts ,
                    qwerty: ds.cloneWithRows(posts),
                });

            }
        })
}

如何在 React Native 中添加现有状态的新数据？

How to add new data in existing state in react native?

state

react-native

react-native-listview

react-native-android