从Firestore获取数据后如何通过“节列表”显示数据

Question

我想从Cloud Firestore检索数据并将数据放入SectionList中。我可以通过Flatlist来显示它。我将收到一个TypeError：undefined不是一个对象（正在评估'section.data.length'）

我试图将Todo放在一个单独的类中，但是我无法显示输出

export default class Todos extends Component {
constructor() {
    super();
    this.ref = firebase.firestore().collection('boards');
    this.unsubscribe = null;
    this.state = {
        textInput: '',
        loading: true,
        boards: [],
    };
}
componentDidMount() {
    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate) 
}

componentWillUnmount() {
    this.unsubscribe();
}
onCollectionUpdate = (querySnapshot) => {
    const boards = [];
    querySnapshot.forEach((doc) => {
      const { emotion } = doc.data();
      boards.push({
        key: doc.id,
        doc, // DocumentSnapshot
        emotion,
      });
    });
    this.setState({ 
      boards,
      loading: false,
   });
  }

 render() {
if (this.state.loading) {
    return null; // or render a loading icon
}
return (
    <View style={{ flex: 1 }}>

    <SectionList

                renderSectionHeader={({ item,index }) => {
                    return (<Todo item={item} index={index} />);
                }}
                sections={this.state.boards}
                keyExtractor={(item, index) => index}>
            </SectionList>
</View>
);
}

}

class Todo extends Component {
render() {
    return (

          <View style={{ flex: 1, height: 48, flexDirection: 'row', alignItems: 'center' }}>
              <View style={{ flex: 8 }}>
                  <Text>{this.props.item.motion}</Text>
              </View>
          </View>

    );
}
}

我希望看到Joy，Love等写的数据。