React native 如何在react native中以现有状态添加新数据?
我正在尝试实现分页。我在每个React native 如何在react native中以现有状态添加新数据?,react-native,state,react-native-android,react-native-listview,React Native,State,React Native Android,React Native Listview,我正在尝试实现分页。我在每个获取请求中获取10个项目的数组,并在调用listview的ONEDRACHED时将它们保存在状态中。我正在获取下一个项目,依此类推 我的问题是,当我获取下一个项目数组时,上一次获取的项目保存在它们消失的状态。当我更新状态时,只显示当前获取的项 我希望上一次提取的项目不会在下一次提取时消失。我可以将新项目附加到现有状态吗?如果是,我怎么做 如果我出了问题,那么我如何使用react native的任何组件实现这一点,而我不知道这一点 这是我的密码 constructor(
获取请求
中获取10个项目的数组,并在调用listview的ONEDRACHED
时将它们保存在状态中。我正在获取下一个项目,依此类推
我的问题是,当我获取下一个项目数组时,上一次获取的项目保存在它们消失的状态。当我更新状态时,只显示当前获取的项
我希望上一次提取的项目不会在下一次提取时消失。我可以将新项目附加到现有状态吗?如果是,我怎么做
如果我出了问题,那么我如何使用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)}
/>
构造函数(道具){
超级(道具);
此.state={
下一步:“,
问题:[]
};
this.fetchData=this.fetchData.bind(this);
}
fetchData(){
返回获取('https://shopconapp.herokuapp.com/api/pagination/')
.then((response)=>response.json())
.然后((响应数据)=>{
如果(!responseData){
导航(“登录”);
}否则{
控制台日志(responseData);
让ds=newListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
这是我的国家({
下一个:响应数据。下一个,
qwerty:ds.cloneWithRows(responseData.results.post),
});
}
})
}
_onEndReached(){
url=this.state.nexturl;
返回获取(this.state.nextur)
.then((response)=>response.json())
.然后((响应数据)=>{
如果(!responseData){
导航(“登录”);
}否则{
控制台日志(responseData);
让ds=newListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
这是我的国家({
下一个:响应数据。下一个,
qwerty:ds.cloneWithRows(responseData.results.post),
});
}
})
}
您可以使用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]),
});
将
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),
});
}
})
}
现在在onedreach
中,将新帖子附加到以前的帖子中,并使您的数据源来自该州
_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),
});
}
})
}
是的,你可以更新状态,显示到目前为止你正在尝试的代码。所以基本上你需要保存你的项目,而不是覆盖。为此,您可以将现有状态缓存在某种基本状态中,然后将新项附加到基本状态中。是的,您可以通过将获取的值添加或附加到上一个状态来向上一个状态添加数据。对于您的响应,请您通过代码给出一些提示。我将首先用代码更新我的问题。我现在更新了,很抱歉代码太长,我缩短了它。是否需要运行
ES6语法
I更新为u给定的,但它向我显示错误,无法将未定义或空值转换为对象
我在两个函数中都更新了它。我认为首先,this.state.qwerty
是空的,因此它显示错误,请调试,并在ONEDREACHED上获取当前状态。现在对于ES6语法来说,运行this.state.qwerty和您要传递到listview的数据源ds不需要任何东西