账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    子组件传递值到父级后,父组件没有马上render?
    22
    0

    问题描述

    我使用FlatList去做一个列表页,renderItem那里我返回一个名为<Item />的子组件,子组件里有个可点击触发返回State给父级的<Text>组件,但点击后页面没有重新渲染,但在我对列表进行下拉刷新或者上拉加载另一页时,修改的state才会重新渲染到页面。
    (ps.这个应该说明父组件State里的值确实改变了,但界面没有立马重新渲染让我很疑惑)

    问题出现的环境背景及自己尝试过哪些方法

    相关代码

    父组件

    export default class List extends Component{
        //初始状态
        constructor(props) {
            super(props);
            this.state = {
              stateName:'parent',
            };
        };
    
       [... 这里省略其他方法 ...]
    
        //回调函数
        updateState (data) {             
            this.setState(data);
        }
        render(){
            return <Flatlist
                      [... 省略Flatlist的其他属性...]
                      renderItem={ ({item}) => {
                                      return <Item
                                                  title={item.title} //列表的标题
                                                  thumb={item.thumb} //列表缩略图
                                                  stateName={this.state.stateName}  
                                                  updateParentState={this.updateState}
                                             />}}       
                         />
    }
    }

    子组件

    const Item =(props)=>{
            const {title,thumb,stateName} = props; 
    
            //子组件用来触发回调函数的方法
            setParentState=(data)=>{
                props.updateParentState(data);//这里由于箭头函数的this指向问题,不能写this.props.updateParentState(data)
            }
    
            return(
                <View>
                    [... 省略其他...]
                    <Image source={{uri:thumb}} style={styles.img}/>
                    <Text 
                        onPress={() => {this.setParentState(  {stateName: 'child'}  )} }
                    >我的状态是{stateName}</Text>
                </View>
            )
        }

    想法

    父组件传递过来的stateName是在本地设置的,不同于其他两个传递过来的title和thumb,这两个是在网上获取之后json解析出来的,也许可以将stateName放在服务器上,一旦服务器的stateName改变,也许Flatlist会重新渲染。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益