子組件傳遞值到父級后,父組件沒有馬上render？

問題描述

我使用FlatList去做一個列表頁，renderItem那里我返回一個名為<Item />的子組件，子組件里有個可點擊觸發(fā)返回State給父級的<Text>組件，但點擊后頁面沒有重新渲染，但在我對列表進行下拉刷新或者上拉加載另一頁時，修改的state才會重新渲染到頁面。
(ps.這個應(yīng)該說明父組件State里的值確實改變了，但界面沒有立馬重新渲染讓我很疑惑)

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

相關(guān)代碼

父組件

export default class List extends Component{
    //初始狀態(tài)
    constructor(props) {
        super(props);
        this.state = {
          stateName:'parent',
        };
    };

   [... 這里省略其他方法 ...]

    //回調(diào)函數(shù)
    updateState (data) {             
        this.setState(data);
    }
    render(){
        return <Flatlist
                  [... 省略Flatlist的其他屬性...]
                  renderItem={ ({item}) => {
                                  return <Item
                                              title={item.title} //列表的標(biāo)題
                                              thumb={item.thumb} //列表縮略圖
                                              stateName={this.state.stateName}  
                                              updateParentState={this.updateState}
                                         />}}       
                     />
}
}

子組件

const Item =(props)=>{
        const {title,thumb,stateName} = props; 

        //子組件用來觸發(fā)回調(diào)函數(shù)的方法
        setParentState=(data)=>{
            props.updateParentState(data);//這里由于箭頭函數(shù)的this指向問題，不能寫this.props.updateParentState(data)
        }

        return(
            <View>
                [... 省略其他...]
                <Image source={{uri:thumb}} style={styles.img}/>
                <Text 
                    onPress={() => {this.setParentState(  {stateName: 'child'}  )} }
                >我的狀態(tài)是{stateName}</Text>
            </View>
        )
    }

想法

父組件傳遞過來的stateName是在本地設(shè)置的，不同于其他兩個傳遞過來的title和thumb，這兩個是在網(wǎng)上獲取之后json解析出來的，也許可以將stateName放在服務(wù)器上，一旦服務(wù)器的stateName改變，也許Flatlist會重新渲染。