道具返回未定义，但我可以在控制台中看到其值

Question

I have a tiny, but frustrating bug. I have a parent component that passes down a prop to its child:

Parent:

const { door } = this.props || []
...
{this.state.showModal ? <ClusterModal door={door} /> : null}

And when I want to access it in my child component: this.props.door .

Also the door props has a key called doors that I want to access. So I tried: console.log(this.props.door.doors) and my console gives me:

Which is great! However React tells me this:

Cannot read property 'doors' of undefined

Sorry if this is a bad explained question, but I can't figure this out.

Thanks for reading!

Edit

Here's the parent:

const { door } = this.props
const ifCluster = (
  <div>
    {door.type === 'cluster' ? (
      <div className="door-flex-item-2">
        <a
          className="sub-title-text-container"
          onClick={() => this.toggleModalButton()}
        >
          Hejsan
        </a>
        {this.state.showModal ? this.props.door ? (
          <ClusterModal door={door} />
        ) : null : null}
      </div>
    ) : null}
  </div>
)

And here's the child:

render() {
  // const { door } = this.props || []

  const customers = this.props.customers || []
  const keyedCustomers = _.keyBy(customers, '_id')

  const deliveries = this.props.deliveries || []
  const keyedDeliveries = _.keyBy(deliveries, '_id')

  console.log(this.props.door)
  const clusterDoors = this.props.door.doors.map((clusterDoor, i) => {
    console.log(clusterDoor)

I noticed that the first time I log this.props.door I get the data, but the second time it gets undefined for some reason.

Answer 1

Store the prop values in state and check the values are same as in your props. Do it in ComponentWillReceiveProps(nextProps) method.

Answer 2

Add condition to your component like this

(this.props.door) ? <ClusterModal door={door} /> : <Div/>

So, it will only render component once it has value within door

Edit :

{
  (this.state.showModal)
  ? (this.props.door)
    ? <ClusterModal door={door} />
    : null
  : null
}

or you can use function as well

clusterModel = () => { // change according to requirement
  if (this.state.showModal) {
    if (this.props.door) {
      <ClusterModal door={door} />
    }
  }
}

Answer 3

The only way that you will see the error:

Cannot read property 'doors' of undefined

Is that the this.props.door.doors from inside of ClusterModal component returns undefined at the door property.

And this is the case of const { door } = this.props || [] const { door } = this.props || [] setting door to undefined. This happens because the right hand side this.props || [] this.props || [] evaluates to [] and the left side fails to do the object deconstruction because you have an array instead of an object with the door key.

A quick fix should be to do:

const { door } = this.props || { door: { doors: []} }

Then inside of your ClusterModal you will NOT get that error.

Here you have the rules of object and array destructuring .

Please check this because const { door } = this.props || [] const { door } = this.props || [] does not makes sense.