将特定的Firebase数据库值插入表React Redux

Question

I have firebase database that looks like this: firebase database

I want to insert specific values from that database (adress, city, owner) into table that looks like this: table

fething data from firebase looks like this:

export function FetchData() {
  return dispatch => {
    firebase_db.on('value', snapshot => {
      dispatch({
        type: FETCH_DATA, 
        payload: snapshot.val()
      });
    });
  }
}

and I'm fetching it with componentDidMount():

componentDidMount(){
    this.props.FetchData()
}

Then when I console.log this.props.data result is: console.log

I'm mapping over list with function renderData():

renderData(dataList) {
    return _.map(this.props.data, (post, key) => {
        return <DataRow key={key} post={post} id={key} />
    })
}

and that is reason why are there two lines with delete button in the table(don't mind about that button, I will move it to the end later...).

So how can I get access to specific property(like adress or owner)? When I try this.props.data.adress it says just undefined , probably because it is rendered before there is some data in the props... Also, when I make single key as a global variable in the console and then try temp1.adress, I get wanted, correct value: "Adress2"

How to put all those adress value from the database to adress column in the table? Maybe to use some middleware(reduxPromise or reduxThunk)?

Thank you for your help!!

Answer 1

When you say:

So how can I get access to specific property(like address or owner)? When I try this.props.data.address it says just undefined, probably because it is rendered before there is some data in the props... Also, when I make single key as a global variable in the console and then try temp1.adress, I get wanted, correct value: "Adress2"

based on the log you showed on the image, I am quite sure that is because your this.props.data is an object with keys like -LJNHbYR...XtZr (a hash basically) so to access the address or the owner you would have to access it like

this.props.data[< hash_value >].address
this.props.data[< hash_value >].owner

And since you are using < DataRow /> inside a map loop it would be great if you'd show us how is implemented this component