从 State React-Native Javascript 获取数据答案

【问题标题】：Get Data from State React-Native Javascript从 State React-Native Javascript 获取数据
【发布时间】：2018-09-22 19:49:21
【问题描述】：

这让我很困惑为什么我无法从状态中获取数据，我尝试了很多东西但没有运气。

我正在从 firebase 数据库获取数据，并尝试将数据存储到状态中，然后我可以从状态中访问该数据。

任何建议将不胜感激。

谢谢

state = {
   isDateTimePickerVisible: false,
   mode: "time",
   minuteInterval: 30,
   selectedDate: {},
   isLoading: true,
   syllabus: [{value: 'Banana'}],
   users: [{
     value: 'Banana',
     app_id: 'apple',
   }],
  timeSlots:[{
     name: 'test',
     time: '123',
  }],
};

testStore() {

let returnArr = [];

  db.ref('bookings/' + this.user).child("22-09-2018").once('value').then(function(snapshot) {
     let data = snapshot.val();
     let timeSlot = Object.values(data);
     console.log("testStore: " + timeSlot[0].name);
     //gets data from the firebase database -- testStore: james
     dt = timeSlot;

     this.setState({
       timeSlots: dt
     });

}.bind(this));
  this.testState();
}

testState() {
  console.log("test state " + this.state.timeSlots[0].name);
  //Get A red screen with error undefined is not an object(evaluating 'this.state.timeSlots['name']) 
}

    onDayPress(day) {

        console.log("day press " + day.dateString);
        this.testStore();
        var st = day.dateString;
        var dt = new Date(st);

        var today = dt;
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //January is 0!

        var yyyy = today.getFullYear();
        if (dd < 10) {
            dd = '0' + dd;
        }
        if (mm < 10) {
            mm = '0' + mm;
        }
        var today = dd + '-' + mm + '-' + yyyy;

        console.log("date is " + today);

        this.setState({
            selectedDate: today
        });

    }

【问题讨论】：

这是 redux 状态还是你的组件？
您还应该准确说明旅游代码在 atm 上的作用。日志正在打印什么等...
感谢您的回复，我已经用控制台日志输出更新了上面的代码
这段代码是写在组件里的吗？据我所知，setState 是一个组件方法，并且是异步的，您应该尝试在 setState 回调中记录您的状态：
this.setState({ timeSlots: dt }, () => { console.log(this.state)});

标签： javascript reactjs firebase react-native firebase-realtime-database

【解决方案1】：

从您的完整代码来看，您的构造函数似乎正在将您的状态重写为一个空对象（因此this.state.timeSlots[0].name 确实有问题）

我会将你的构造函数重写为：

constructor(props) {
    super(props)
    this.state = {
      isDateTimePickerVisible: false,
      mode: 'time',
      minuteInterval: 30,
      selectedDate: {},
      isLoading: true,

      syllabus: [{
        value: 'Banana',
      }],
      users: [{
        value: 'Banana',
        app_id: 'apple',
      }],

      slots: [{
        name: 'test',
        time: '123',
        user_id: '373737',
      }],
    }
this.onDayPress = this.onDayPress.bind(this)
this.testStore = this.testStore.bind(this)

}

和 testStore 为：

testStore() {
      const returnArr = []

      db.ref(`bookings/${this.user}`).child('22-09-2018').once('value').then((snapshot) => {
        const data = snapshot.val()
        const timeSlot = Object.values(data)

        console.log(`testStore: ${timeSlot[0].name}`)

        dt = timeSlot

        this.setState({
            timeSlots: dt
        }, () => {
            console.log('after setState', this.state.timeSlots)
        })
      })
    }

【讨论】：