отображение FireBase читать реквизит реагировать-родной

Question

это может не быть проблемой с самим отображением, но я прочитал некоторые данные из моей базы данных Firebase в реальном времени в свое состояние, и я пытаюсь передать их как реквизиты, а затем отобразить их в следующем компоненте.

Я получаю следующую ошибку, я использую эмулятор android:

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

app. js (где я обновляю состояние)

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() });
  };

мой компонент Notes, где я сопоставляю реквизиты

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

Вы должны проверить, были ли переданы notes или они undefined или null. JavaScript не собирается отображать объект undefined.

Попробуйте следующий код:

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

Эта функция .map будет запущена, только если notes не является ни undefined ни null.

Answer 2

Поэтому моя проблема заключалась в том, что мне нужно было обновить состояние заметок, убедившись, что это массив. Я по ошибке просто обновил его как объект, а затем попытался отобразить объект. Вот мое решение.

от этого

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() });
  };

к этому

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()] });
  };