在分页期间,内容被替换而不是附加到本机反应中
Posted
技术标签:
【中文标题】在分页期间,内容被替换而不是附加到本机反应中【英文标题】:Content is being replaced instead of appended to in react native during pagination 【发布时间】:2018-09-27 20:34:03 【问题描述】:下面是获取数据的主视图屏幕,然后将其传递给渲染组件。由于某种原因,内容没有被附加,而是被新的 1 替换。
export default class Questions extends React.Component
constructor(props)
super(props);
this.state =
data:[],
options_array: [],
last_id: 0,
username: '',
image_url:''
;
loadInitialState = async () =>
this.state.username = await AsyncStorage.getItem('user'); //This should be tranfered from the login
this.state.image_url = await AsyncStorage.getItem('image_url');
this.getData();
;
getData()
return fetch('url.com/endpoint',
method: 'POST',
headers:
'Accept': 'application/json',
'Content-Type': 'application/json'
,
body: JSON.stringify(
username: this.state.username,
last_id: this.state.last_id,
options_array: this.state.options_array
)
)
.then((response) =>
console.log(response);
return response.json()
)
.then((res) =>
this.setState(data: res.questions);
this.setState(last_id:res.last_id);
)
.catch((error) =>
console.error(error);
);
componentDidMount()
this.loadInitialState().done();
render()
return (
<Content>
<TouchableOpacity onPress=()=>this.props.navigation.navigate("PostQuestion")>
<Card transparent>
<CardItem>
<Left>
<Thumbnail small source=uri: this.state.image_url />
<Body>
<Text style=styles.poster_username>this.state.username</Text>
<Text style=styles.moto1>Help others help you</Text>
</Body>
</Left>
</CardItem>
</Card>
</TouchableOpacity>
<QuestionsData data=this.state.data navigation = this.props.navigation/>
<Button title='Load' onPress=()=>this.loadInitialState().done()/>
</Content>
);
下面是渲染发生的地方
导出默认类 QuestionsData 扩展 React.Component 构造函数(道具) 超级(道具); this.state = 导航:空
componentDidMount()
this.state.navigation = this.props.navigation;
console.log(this.props)
questionList(props)
return props.data.map(function (questionData, index)
return renderQuestionContent(questionData, props)
);
render()
return this.questionList(this.props)
【问题讨论】:
【参考方案1】:我设法弄明白了,我用this.setState(data: [ ...this.state.data, ...res.questions ]);
替换了this.setState(data: res.questions);
,然后它工作得很好
【讨论】:
以上是关于在分页期间,内容被替换而不是附加到本机反应中的主要内容,如果未能解决你的问题,请参考以下文章
如何在分页 UIScrollView 中显示确定的项目,而不是仅从 0 加载它