将 firebase 读取映射到 props react-native答案

【问题标题】：mapping firebase read to props react-native将 firebase 读取映射到 props react-native
【发布时间】：2020-01-16 19:28:32
【问题描述】：

这可能不是映射本身的问题，但我已经从我的 firebase 实时数据库中读取了一些数据到我的状态中，我正在尝试将其作为道具传递，然后将其映射到后续组件中。

我收到以下错误，我使用的是安卓模拟器：

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

【问题讨论】：

标签： firebase react-native setstate react-props

【解决方案1】：

您必须检查notes 是否已被传递，或者它们是undefined 还是null。 JavaScript 不会映射 undefined 对象。

试试下面的代码：

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

仅当notes 既不是undefined 也不是null 时才会运行.map 函数。

【讨论】：

感谢您的提示。无论如何，我确实使用它来保护数据呈现。

【解决方案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()] });
  };

【讨论】：