javascript - Reactjs 在 setState 不起作用后将值作为 Prop 传递

Question

当用户点击打开时，我试图通过 Prop 将对象传递给模态。我正在从单击的行中接收值，但我的模态无法从 this.props 中读取值，并且我得到了一个未定义的值。我正在正确设置状态值并将其传递给模态组件。

模态调用

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

设置状态值

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

在模态组件的渲染部分

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

在模态组件内部时，我得到未定义。在此之前的任何地方，我都会得到用户对象。

谢谢

Answer 1

在你的组件中，你只是检查 null 而不是 undefined ，如果你想检查 undefined 一种方法是使用 typeof

typeof user !== "undefined"

所以它会像(如果你想检查两者或一个，你可以相应地修改它):

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

如果 block

你可以将 this.setState 移到里面

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