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

Question

问题描述

我使用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会重新渲染。

Answer 1

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