子组件传递值到父级后,父组件没有马上render



  • 一. 问题描述

    我使用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是在本地设置的,不同于其他两个传递过来的titlethumb,这两个是在网上获取之后json解析出来的,也许可以将stateName放在服务器上,一旦服务器的stateName改变,也许Flatlist会重新渲染。我明天会试试。



  • 把flatlist的extraData设为this.state试一试



  • updateState (data) {             
            this.setState(data);
        }
    

    改成

    updateState  = (data) => {             
            this.setState(data);
        }
    


  • 数据就是内存里的值,不管值源头从哪来,到了内存里都一样,不存在什么本地的远程的区别(内存里难道还给你记录户籍?)



  • @mirghojam 谢谢,解决了。



  • @晴明 谢谢老师指点



  • @晴明 嗯,之前把<Item />组件里的 updateParentState={this.updateState.bind(this)}里的bind.this删了后忘记把回调函数改成箭头函数形式了。



  • 解决方式:

    在Flatlist里多设置extraData属性,因为之前的stateName这个变量不是存在于Flatlist的data属性里的,所以stateName改变的时候Flatlist没有及时刷新。