reactnative 浅比较不渲染的问题

最新推荐文章于 2024-03-26 21:46:16 发布

原创最新推荐文章于 2024-03-26 21:46:16 发布 · 995 阅读

0 ·

CC 4.0 BY-SA版权

ReactNative 专栏收录该内容

31 篇文章

订阅专栏

本文解决React Native中FlatList状态更新后视图不刷新的问题。通过分析PureComponent特性及数据源引用变化，提供具体解决方案，包括如何正确更新数据源以触发视图重绘。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我是从A页面跳转到B页面，B页面回传值A页面，然后A页面刷新。
我遇到的问题是，我把dataSource数据改了以后，必须滑动一下页面才能把数据展示出来。
两个坑：

RN教程中对PureComponent这类组件有个介绍。 本组件继承自PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。
其实就是对象的引用不变，页面就不重新渲染。看我的DataSource是多层的Object，开始我只改了里面的title，其实这时object的引用没有变。解决办法就是改变object的引用。重新alloc一个object就可以了。

getUserData(data){
        console.log('回传的地址'+data);
        let obj = {...sectionData[0]}
        obj.subtitle = data.title;
        sectionData.splice(0,0,obj);
        // sectionData.push(obj);
        //alloc一个新的数组
        let list = [];
        list = list.concat(sectionData)
        this.setState({
            selectClinic:data.title,
            groupDetailData:list,
        })
    }

2.第二个是自己不仔细，把全局的dataSource直接赋值给FlatList的data了，导致使用setState没有效果，这个不多说了。

A页面FlatList和navigator获取回传值的代码

let sectionData=[
    {
        title:"上次预约项目",
        icon:require('../../../images/上次预约图标.png'),
        subtitle:'没约会搜索',
        showNextIcon:false,
        data:[
            {name:'美白针',content:'hello'}
        ],
    },
    {
        title:"本次预约项目",
        subtitle:'没约会搜索',
        showNextIcon:false,
        icon:require('../../../images/上次预约图标.png'),
        data:[
            {name:'美白针',content:'hello'}
        ],
    },
    {
        title:"选择门店",
        subtitle:'没约会搜索',
        showNextIcon:true,
        icon:require('../../../images/选择门店.png'),
        data:[
        ],
    },
    {
        title:"预约时间",
        subtitle:'没约会搜索',
        showNextIcon:true,
        icon:require('../../../images/预约时间.png'),
        data:[
        ],
    },
    {
        title:"选择顾问",
        subtitle:'没约会搜索',
        showNextIcon:true,
        icon:require('../../../images/选择顾问.png'),
        data:[
        ],
    },
    {
        title:"到店支付",
        subtitle:'没约会搜索',
        showNextIcon:false,
        icon:'',
        data:[
            {name:'美白针',content:'hello'}
        ],
    },

]

_sectionHeaderTouch(section) {
        console.log(section)
        //这里是反向传值的。
        this.props.navigation.navigate('reserveSelectClinic', {callback:((data)=>{
            this.getUserData(data)
            })})
    }
    getUserData(data){
        console.log('回传的地址'+data);
        let obj = {...sectionData[0]}
        obj.subtitle = data.title;
        sectionData.splice(0,0,obj);
        // sectionData.push(obj);
        let list = [];
        list = list.concat(sectionData)
        this.setState({
            selectClinic:data.title,
            groupDetailData:list,
        })
    }
    _sectionHeaderView = ({item})=>{
        let extendImage =item.showNextIcon ? <Image style={{width:17,height:17,marginRight:10}} source={require('../../../images/大于号-(1).png')}/> : null;

        return (
            <TouchableOpacity style={styles.secion_header} onPress={this._sectionHeaderTouch.bind(this,item)} >
                <Image style={styles.secion_header_image} source={item.icon}></Image>
                <Text style={styles.secion_header_title} >{item.title}</Text>
                <Text style={styles.secion_header_subtitle}>{item.subtitle}</Text>
                {extendImage}
            </TouchableOpacity>
        )
    }
    render(){
        return (
            <SafeAreaView>
                <FlatList
                    style={styles.main}
                    data={this.state.groupDetailData}
                    renderItem={this._sectionHeaderView}
                />

            </SafeAreaView>


        )

    }

B页面的代码

export default class SelectClick extends Component{

    static  navigationOptions = ({navigations,screenProps})=>({
        headerTitle:"选择门店"
    })


    constructor(props){
        super(props)
    }
    _pressItem=({item})=>{
    //回传值给A页面。
        if (this.props.navigation.state.params.callback){
            this.props.navigation.state.params.callback(item);
            this.props.navigation.goBack();
        }
    }
    _renderItem=(item)=>{
        return(
            <MyListItem
                style={styles.myListItem_text}
                name={item.item.title}
                onPressItem={this._pressItem.bind(this,item)}
            />
        )

    }

    render(){
        return (
            <SafeAreaView>
                <FlatList
                    data={dataSource}
                    renderItem={this._renderItem}

                />
            </SafeAreaView>
        )
    }