問(wèn)題描述

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

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

相關(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; 

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

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

想法

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