0

I am using React. I have an object (that I get from my props) which I was having trouble accessing its key/values. Then I decided to console.log this object alongside a dummy object that mimics the structure of the first object just for comparison reasons, as can be seen by the code below:

var dummyArr1 = [{1:"hey"}, {2:"my"}, {3:"gosh"}]
var dummyArr2 = [{1:"hey"}, {2:"my"}, {3:"gosh"}]
var dummyObj = { key1: dummyArr1,   key2gwegwegwegweg: dummyArr2 }
console.log(this.props.foreignObjects)
console.log(dummyObj)
console.log(Object.keys(this.props.foreignObjects))

The result can be seen below:

Result of console.log showing an object with no keys

You can see that the console doesn't immediately show the keys of my original object, only when I click the small arrow on the side to show more. This doesn't happen with my dummy object.

My question is: why is this? Why can't I access my original object's keys (such as by entering this.props.foreignObjects[conexao_inversor])? And how can I access the data inside it?

EDIT: This is the data flow of the app:

First, I get all tables that are foreign keys of the main table:

let foreignKeys = {}
foreignColumns.forEach((column, index) => {
    let foreignUrl = "http://localhost:4000/edit/get-data/" + column.foreignKeyOf
    fetch(foreignUrl)
    .then(foreignResponse => foreignResponse.json())
    .then(foreignResponse => {
        foreignObjects[column.foreignKeyOf] = foreignResponse.data
    })
})
this.setState({
    foreignObjects: foreignObjects
})

Then, when invoking my component, I pass props like this:

<TableRowGenerator
    tableStructure={this.props.tableStructure}
    objects={this.state.objects}
    foreignObjects={this.state.foreignObjects}
/>

And then, inside my component, during the render function, I access it like described in the very first snippet of code from my question.

סטנלי גרונן
  • 2,917
  • 23
  • 46
  • 68
Denolth
  • 135
  • 11
  • if you hover the little blue `i` you would see that it says that the object was evaluated just now. so, to help you a little more, any chance you could share how the props are received in your component, what's the dataflow etc? – Icepickle Jul 02 '19 at 22:07
  • 2
    `this.props.foreignObjects` has no keys when you log it. They are added to it at some point after you log it, so they are there when you click the arrow to expand it. – Paul Jul 02 '19 at 22:07
  • 1
    Thank you very much both of you. As I requested, I have edited my question providing the data flow. What (or when) would be the correct way to get the props in this case? – Denolth Jul 02 '19 at 22:15
  • @RandyCasburn I think it is indeed. I've just realized it myself. Thanks! Would have taken me ages. – Denolth Jul 02 '19 at 22:17
  • You should only do `this.setState` after the last `then` of your fetch promise chain (so you should handle default values for your tablerowgenerator in case you want to render it already, or `return null` in case you want to wait for that data to be available) – Icepickle Jul 03 '19 at 15:19

0 Answers0