如何在本机反应中以现有状态添加新数据？

Question

我正在尝试实现分页。我在每个 fetch request 中获取 10 个项目的数组，并将它们保存在 listview 的 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

将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),
                });

            }
        })
}

Answer 2

你可以使用 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]),
});