Question

我正在开发一个新闻应用程序，这是新闻详细信息屏幕，它呈现所有新闻详细信息，但是我想在到达终点时在此新闻下方呈现下一个新闻。我可以通过使用isCloseToBottom方法来获取新新闻的详细信息，并且可以呈现新新闻，但是旧新闻将被替换，但是我不希望旧新闻消失。有什么解决方法吗？

  class NewsDetails extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            loaded: false,
            article: {},
            request_control:1
        };
    }

    componentWillMount() {
        const { params } = this.props.navigation.state;
        console.log(params.id);
        axios
            .get(`${URL_NEWS_DETAILS}/${params.id}`)
            .then(response =>
                this.setState({
                    article: response.data,
                    loaded: true,
                })
            )
            .catch(error => console.log(error));
    }


    _onRefresh=()=>{
        this.setState({refreshing: true})
        axios.get(`${URL_NEWS_DETAILS}/210971`) //test with constant id
            .then(response =>
                this.setState({
                    article: response.data,
                    loaded: true,
                })
            )
            .catch(error => console.log(error));

        this.setState({refreshing: false});

    };


    renderNext=()=>{

        if(this.state.request_control===1) {
            this.setState({request_control: 0});
            axios.get(`${URL_NEWS_DETAILS}/210971`) //test with constant id
                .then(response => {
                        this.setState({
                            request_control:1,
                            article: response.data,
                            loaded: true
                        })

                    },
                )
                .catch(error => {
                    this.setState({ loaded: true})
                    console.log(error)
                })
        }

    };



    render() {
        if (this.state.loaded) {
            return (
                <View style={styles.container}>
                    <ScrollView showsVerticalScrollIndicator={false}
                                onScroll={({nativeEvent}) => {
                                    if (isCloseToBottom(nativeEvent)) {
                                        this.renderNext()
                                    }
                                }}
                                scrollEventThrottle={400}
                                refreshControl={
                                    <RefreshControl
                                        refreshing={this.state.refreshing}
                                        onRefresh={this._onRefresh.bind(this)}
                                    />
                                }>
                        <Text style={styles.title}>
                            {this.state.article.title.rendered.replace("&#8211;", "-")}
                        </Text>

                        <View
                            style={{ marginTop: 10, marginBottom: 10, flexDirection: 'row', alignItems: 'center' }}>
                            <Image
                                style={{ width: 18, height: 18 }}
                                source={require('../../img/icon.png')}
                            />
                            <Text style={{ fontFamily: 'Open Sans Bold', fontSize: 14 }}>
                                {' '}
                                {this.state.article.author}
                            </Text>
                            <Text style={{ fontFamily: 'Open Sans Regular', fontSize: 13 }}>
                                {' '}
                                në{' '}
                            </Text>
                            {this.state.article.categories.map(category => {
                                return (
                                    <Text
                                        style={{
                                            fontFamily: 'Open Sans Regular',
                                            fontSize: 13,
                                            color: '#F33A22',
                                        }}>
                                        {category.name},{' '}
                                    </Text>
                                );
                            })}
                        </View>

                        <Lightbox underlayColor="white">
                            <Image
                                style={styles.image}
                                source={{ uri: this.state.article.featured_image_url }}
                            />
                        </Lightbox>

                        <HTMLView
                            value={'<div>' + this.state.article.content.raw + '</div>'}
                            renderNode={Platform.OS === 'android' ? this.renderNode : null}
                            stylesheet={htmlStyles}
                        />


                        {/*HERE I NEED TO RENDER A NEW NEWS BELOW THE MAIN ONE, */}
                        {/*TO CREATE AN EFFECT LIKE USED IN WEB THAT DISPLAYS NEWS AFTER NEWS*/}


                    </ScrollView>
                </View>
            );
        } else return <Spinner />;
    }
}

Answer 1

当您调用article时，您的状态renderNext将被新状态替换，因此旧状态将被替换。要解决此问题，只需更改

    renderNext=()=>{

        if(this.state.request_control===1) {
            this.setState({request_control: 0});
            axios.get(`${URL_NEWS_DETAILS}/210971`) //test with constant id
                .then(response => {
                        this.setState({
                            request_control:1,
                            article: [...this.state.article, ...response.data],
                            loaded: true
                        })

                    },
                )
                .catch(error => {
                    this.setState({ loaded: true})
                    console.log(error)
                })
        }

    };

如何在当前屏幕的末尾渲染新元素-REACT NATIVE

1 个答案: