stateを関数に挿入する方法は？

Question

私はfirebaseデータベースクエリから生成された配列を持っています。

状態を保存して、データが変更されると画面を再描画するようにします。

私はstateから自分の関数に値を取得できないようです。配列から値を渡しても機能しますが、データが変更されると自動的に再描画されません。

アレイを使用したスクリーンショット...コンソールログは、状態が正しく設定されていることを表示しています。

、ここでそれはそれはお奨めは、ライン101の周りに正しいことだが、私はthsi仕事をするために右の構文を把握することはできませんエラーで

です。

更新：私は状態を初期化していませんでした。これはエラーの一部でした。今、Imは捕捉されない例外TypeErrorを取得

import React, { Component } from 'react'; 
import Flexbox from 'flexbox-react'; 

import firebaseApp from '../api/firebase'; 
import GeoFire from 'geofire'; 

var geoRef = firebaseApp.database().ref('shiftgeo'); 
var geoFire = new GeoFire(geoRef); 
var ref = geoFire.ref(); // ref === firebaseRef 
var shiftKeys = []; // this array will hold the keys from the geoFire results 
var shifts = []; // this array will hold the actual shift data of shifts in the geo, then we will filter it later 

console.log(firebaseApp); 

export class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     fname: 'Chris', 
     lname: 'Chong', 
     cellphone: '503 830 4313', 
     email: 'chris@ehotleads.com', 
     dataSource: '' 
    }; 
    } 
    componentWillMount() { 
    let email = 'chris@ehotleads.com'; 
    let password = '123456789'; 
    firebaseApp.auth().signInWithEmailAndPassword(email, password) 
      .then((data) => { 
      //this.setState({ error: 'Account already exists. Logging you in...', loading: false }); 
      console.log('success data', data); 
      this.setState({ 
       user: data, 
      }); 
      }) 
      .catch((data) => { 
      //this.setState({ error: 'Authentication failed.', loading: false }); 
      console.log('error data', data); 
      }); 
    } 

    componentDidMount() { 
    var geoQuery = geoFire.query({ 
     center: [45.616422, -122.580453], 
     radius: 1000, 
     }); 
    geoQuery.on("key_entered", function(key, location, distance) { 
     // dont forget that as shifts are added that match the geo, this will automatically add to the shiftKeys array 
     //shiftKeys = []; 
     shiftKeys.push(key) 
     console.log("Found shift " + key + " at " + location + " (" + distance + " km away)"); 
    }); 

    geoQuery.on("ready",() => { 
     shifts = []; // we need to blow out the array every time this function runs or it will throw errors 
     shiftKeys.forEach((shiftKey) => { 
     //console.log(shiftKey); 
     let shiftsRef = firebaseApp.database().ref('shifts').child(shiftKey); 
     shiftsRef.on("value", (snapshot) => { 
      //console.log(snapshot.val()) 
      //if (snapshot.val().state == "WA" && (snapshot.val().licenseRequired == "CNA" || snapshot.val().licenseRequired == "RN")) { 
      //if (snapshot.val().licenseType == this.state.licenseType || snapshot.val().licenseRequired == "TEST") { 
      shifts.push({ 
      key: snapshot.key, 
      fname: snapshot.val().fname, 
      lname: snapshot.val().lname, 
      company: snapshot.val().company, 
      address1: snapshot.val().address1, 
      address2: snapshot.val().address2, 
      city: snapshot.val().city, 
      state: snapshot.val().state, 
      zip: snapshot.val().zip, 
      shiftDate: snapshot.val().shiftDate, 
      shiftStart: snapshot.val().shiftStart, 
      shiftLength: snapshot.val().shiftLength, 
      shiftDescription: snapshot.val().shiftDescription, 
      licenseType: snapshot.val().licenseType, 
      logo: snapshot.val().logo, 
      building: snapshot.val().building, 
      }) // end shifts.push 
      var date_sort_asc = function (date1, date2) { 
      if (date1.shiftDate > date2.shiftDate) return 1; 
      if (date1.shiftDate < date2.shiftDate) return -1; 
      return 0; 
      }; 
     //} 
      //console.log(this.state.distancePref) 
      this.setState({ 
      dataSource: shifts, 
      resultCount: shifts.length, 
      }) 
     }); // end shiftsRef.on 
     }); // end shiftKeys map 
    }); // end geoQuery.on 
    console.log('ShiftArray: ', shifts) 
    console.log('StateArray: ', this.state.dataSource) 
    } 


    render() { 
    const listItems = this.state.dataSource.map((shift) => 
     <li key={shift.key}> 
     {shift.address1} 
     </li> 
    ); 
    console.log('ShiftArray: ', shifts) 
    console.log('StateArray: ', this.state.dataSource) 

    return (
    <Flexbox flexDirection="column" minHeight="100vh"> 
    <Flexbox element="header" height="60px"> 
     Header link one 
    </Flexbox> 

    <Flexbox flexGrow={1}> 
     <Flexbox 
     width="20%" 
     minWidth="200px" 
     maxWidth="300px" 
     style={{ backgroundColor: '#ba0000' }}> 
      Sidebar Menu Goes Here 
     </Flexbox> 
     <Flexbox width="80%" flexDirection="row" style={{ backgroundColor: '#FFF' }}> 
     <div>List of Shifts Addresses</div> 
     <ul>{listItems}</ul> 
     </Flexbox> 
    </Flexbox> 

    <Flexbox element="footer" height="60px"> 
    Footer 
    </Flexbox> 
</Flexbox> 
    ); 
    } 
} 

：this.state.dataSource.mapが機能

Answer 1

ではない問題は、私は状態でdataSourceの初期化に失敗したことだったし、その後、私はそれを初期化空の配列の代わりに文字列を使用します。

ありませんでした：コンストラクタのthis.setstateにdataSource: []があります。