在分页期间,内容被替换而不是附加到本机反应中

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);,然后它工作得很好

【讨论】:

以上是关于在分页期间,内容被替换而不是附加到本机反应中的主要内容,如果未能解决你的问题,请参考以下文章

CATransition 提前推送过渡替换内容

Angular 4,热模块替换附加而不是替换

如何在分页 UIScrollView 中显示确定的项目,而不是仅从 0 加载它

在分页库 3 中恢复滚动位置

我可以在本机反应中使用 .jks 文件而不是 .keystore 文件吗?

UITextView 在分页 UIScrollView 内滚动不起作用