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

Posted 2023-02-22

【中文标题】在 setState 不起作用后，Reactjs 将值作为道具传递

【英文标题】：Reactjs pass value as prop after setState not working

【发布时间】：2018-08-02 15:04:45

【问题描述】：

当用户单击打开时，我试图通过道具将对象传递给模态。我从单击的行接收值，但我的模式无法从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);

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

谢谢

【问题讨论】：

在setState() 完成后尝试forceUpdate()：this.setState( isOpen: !this.state.isOpen, user: userData ,()=> console.log('User data changed'); this.forceUpdate(); )

您只检查 null 什么是 user=undefined，因为 null !== undefined 为真，请在 toggleModal 方法中执行 console.log(user) 并检查值。

感谢您指出错误。当我将值传递给 Modal 组件时，我仍然得到一个 undefined。

【参考方案1】：

在您的组件内部，您只是检查 null 而不是 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
     )
    

【讨论】：

这部分有帮助，但是当在模态组件内部时，我仍然得到一个未定义的错误，就好像 this.props.user 在它应该有一个用户对象时失败了。

这是因为当 setState 是异步操作时，你能显示你在哪里初始化你的状态，即this.state =

当用户数据按照此线程的建议设置时，我正在调用 forceUpdate()。在 App.js 中，我有 constructor(props) super(props) this.state = isOpen: false, dataType: 'user', user: this.changeSearchState = this.changeSearchState.bind(this); 如果我只是使用 props 值，我是否需要在模态组件上有一个状态？

当我从 App.js 进行 .log 时，我可以看到用户对象 -> 但是当从模态组件调用 this.props.user 时，它返回为未定义。

在您的模态组件中，您可以登录this.props 并查看您是否正确连接了道具？如果可能的话，您可以使用整个模态组件更新您的代码，而不仅仅是toggleModal