Question

我正在尝试将数据从父RN组件传输到子RN。

我的父级RN组件：

export default class ListOfUserPhotos extends Component {

constructor(props) {
    super(props);
    this.state = {
        ...
    };
}

componentDidMount() {
    ...
}

render() {
     return this.state.photosKeysArray.map((photo, index) => {
            console.warn('photoData - ' + photo)
            // returns 'photoData - {photoValue}' - everything is OK here
            return <ListOfUserPhotos_ListView key = {index} 
                                              description = {photo.description}
                                              ...
                    />
        })
    }
    }
};

我的孩子RN组件：

export default class ListOfUserPhotos_ListView extends Component {
render() {
    return(
        <View style = {listOfUserPhotosStyle.container_list}>
            {console.warn('desc = ' + this.props.description)}
            // returns 'desc = undefined' - everything is BAD here

                ...

        </View>
    )
}
}

在将数据传递给子组件之前，我可以控制台该数据并在那里查看它。但是道具内部的道具是不确定的。

有人可以向我解释我做错了什么吗？还是应该以其他方式在RN Component之间传输数据？

Answer 1

在异步检索数据时，应执行以下操作以确保重新呈现组件。

componentDidMount() {
    // You need to set the state here to cause a re-render
    this.setState({
       photosKeysArray: firebase.response
    });
}

render() {
     const { photosKeysArray } = this.state;

     if(photosKeysArray.length === 0) {
       return <Text>Loading...</Text>
     }

     // this will be returned if above condition is not met
     return photosKeysArray.map((photo, index) => {
       return (
           <ListOfUserPhotos_ListView 
             key = {index} 
             description = {photo.description}
           />
         );
     })
};

将道具转移到React Native组件的问题

1 个答案: