Question

我有一个名为data的父组件传递的数组对象，当我的子组件被调用时，我检查道具是否在componentWillMount中传递了console.log(this.props.data)。我在控制台中看到了这一点（这是正确的）：

接下来，我设置了一个简单的FlatList来查看是否可以传递数据，但我的屏幕仍为空白：

render() {
        return (
            <View>
                <FlatList
                    data={this.props.data}
                    renderItem={({item}) => <Text>{item.videoURL}</Text>}
                />
            </View>
        );
    }

鉴于如何将数据对象呈现给FlatList，我应该如何使用renderItem从项目中接收数据？或者我错过了什么？感谢

编辑，更多代码上下文：

class VideoFeed extends React.Component {
    constructor(props) {
        super(props);
        //this.dataRef = database.ref("music");
        this.state = {
            data: this.props.data,
        }
    }

    componentWillMount() {
        console.log(this.state.data);
    }

    render() {
        return (
            <View>
                <FlatList
                    data={this.state.data}
                    renderItem={({item}) => <Text>{item.videoURL}</Text>}
                />
            </View>
        );
    }

}

class Home extends React.Component {
    constructor() {
        super();
        this.state = {
            itemList: null,
        }
    }

    componentWillMount() {
        this.listenForMusic(); 
    }

    listenForMusic(){
        var dataRef = database.ref("music");
        let items = [];
        dataRef.orderByChild("date").on('child_added', (snap) => {
            items.push({
                videoURL: snap.val().youtubeURL,
                title: snap.val().title,
                thumbnail: snap.val().thumbnail
            });
        });
        this.setState({ itemList: items });
    }

    render() {
        const { navigate } = this.props.navigation;
        return (
          <View style={styles.videoFeedContainer}>
            <VideoFeed data={this.state.itemList}/>
          </View> 
        );
    }
}

现在我甚至在那之前得到了一个错误，“无法读取未定义的属性'数据'我试图从道具更改为状态时得到这个。

Answer 1

从FlatList更改renderItem 用这个：

renderItem={({item}) => ( <Text>{item.videoURL}</Text> )}

添加paranthesis会返回函数的结果，否则你在函数中没有返回。

FlatList不会从道具

1 个答案: