将 firebase 读取映射到 props react-native

Question

this might not be an issue with the mapping itself but i've read some data from my firebase realtime database into my sate and i'm trying to pass it as props then map it in a subsequent component.

I am getting the following error, I am using an android emulator:

TypeError: undefined is not a function (near ...'this.props.notes.map'...)

app.js (where I update the state)

state = {
    loggedin: false,
    notes: [
      {
        id: 1,
        text: "mow the lawn",
        author: "dean",
        time: "10am"
      },
      {
        id: 2,
        text: "feed the dog",
        author: "sam",
        time: "2pm"
      }
    ]
  }

//passing props to notes component
<Notes style={styles.notes} notes={this.state.notes} />


updateNotes = async () => {

    console.log("grabbing new notes");
    const snapshot = await firebase.database().ref('Users/Notes').once('value');
    console.log(snapshot.val())
    this.setState({ notes: snapshot.val() });
  };

my Notes component where I map the props

renderCondition =()=>{
    if(this.state.Deleted === false){
      return(
        <View>
        {this.props.notes.map(note => (
          <View
            style={styles.note}
            key={note.author}
            id={note.id}
          >
            <Text style={styles.noteHeader}>{note.author}</Text>
            <Text style={styles.noteText}>{note.text}</Text>

              <Text style={styles.noteTime}>{note.time}</Text>
              <Button title= 'X' onPress={() => this.setState({Deleted:true}) }></Button>
          </View>

        ))}
      </View>
      )
        }

      return(
      <View>
        <Text>are you sure you want to delete this note?</Text>
        <Button title="Yes"></Button>
        <Button onPress ={()=>{this.setState({Deleted:false})}} title="No"></Button>
      </View>
      )
  }

render() {
    return (
      <View>
      {this.renderCondition()}
      </View>
    );
  }

Answer 1

You have to check whether the notes have been passed down or whether they are undefined or null . JavaScript is not going to map an undefined object.

Try the following code:

{this.props.notes && this.props.notes.map(note => (
    // do stuff with each note...
))}

This will run the .map function only if the notes are neither undefined nor null .

Answer 2

So my issue was that I needed to update my notes state by making sure it was an array. I had mistakenly simply updated it as an object and then attempted to map the object. Here is my solution.

from this

updateNotes = async () => {

    console.log("grabbing new notes");
    const snapshot = await firebase.database().ref('Users/Notes').once('value');
    console.log(snapshot.val())
    this.setState({ notes: snapshot.val() });
  };

to this

updateNotes = async () => {

    console.log("grabbing new notes");
    const snapshot = await firebase.database().ref('Users/Notes').once('value');
    console.log(snapshot.val())
    this.setState({ notes: [snapshot.val()] });
  };