在 setState 不起作用后，Reactjs 将值作为道具传递

Question

I'm trying to pass down to a modal a object via a prop when a user clicks to open. I'm receiving the value from the clicked row but my modal can't read the value from this.props and I'm getting an undefined. I am setting the state value correctly and passing it to the modal component.

Modal Call

<Modal toggleModal={this.toggleModal} show={this.state.isOpen}
          onClose={this.toggleModal} user={this.state.user} />

Setting the state value

toggleModal = (user) => {
var userData = {};
if (user !== null) {
  userData = user
}
this.setState({
  isOpen: !this.state.isOpen,
  user: userData
},()=>{
  console.log('User data changed');
})
}

Inside the render part of the modal component

if (this.props.user === null) {
  userFound = 'Not found'
}
console.log(this.props.user);

When inside the modal component I get undefined. Everywhere before that I get the user object.

Thanks

Answer 1

Inside your component you are just checking for null and not undefined , if you want to check for undefined one of the ways is to make use of typeof

typeof user !== "undefined"

so it will be like (You can ammend it accordingly if you want to check for both or one ):

toggleModal = (user) => {
  var userData = {};
  if (typeof user !== "undefined" && user !== null) {
  userData = user
}

And you can move this.setState inside if block

toggleModal = (user) => {
    if (typeof user !== "undefined" && user !== null) {
      this.setState({
        isOpen: !this.state.isOpen,
        user: user
     })
    }
}