在无状态组件中的现有状态转换期间无法更新

Posted 2023-04-18

【中文标题】在无状态组件中的现有状态转换期间无法更新

【英文标题】：Cannot update during an existing state transition in stateless component

【发布时间】：2018-08-29 05:51:25

【问题描述】：

我有以下警告：

警告：setState(...)：在现有状态转换期间无法更新（例如在 render 或其他组件的构造函数中）。

使用 React-redux-router 我了解，但不知道如何修复。

这是生成警告的组件。

const Lobby = props => 
  console.log("props", props)
  if (!props.currentGame)
    return (
      <div>
        <input type="text" ref=input => (roomName = input) />
        <button
          className="button"
          onClick=() => 
            props.createRoom(roomName.value)
          
        >
          Create a room
        </button>
      </div>
    )
  else
    return (
      <div>
        props.history.push(`/$props.currentGame[$props.username]`)
      </div>
    )


export default Lobby

我在这里所做的是我的组件从 Redux 商店接收 currentGame 属性。此属性初始化为 null。 当用户创建游戏时，我想将他重定向到由服务器生成的新 URL 上，该 URL 我在属性 currentGame 内分配一个 socket.io 动作事件，该事件在组件 Lobby 已初始化。

但是，由于 currentGame 属性发生了变化，组件被重新渲染，因此行

props.history.push(`/$props.currentGame[$props.username]`)

生成警告，因为属性 currentGame 现在有一个值，并且在重新渲染期间不应修改 history 属性。

关于如何修复它的任何想法？

谢谢！

【参考方案1】：

你不应该在渲染中写props.history.push，而是使用Redirect

const Lobby = props => 
  console.log("props", props)
  if (!props.currentGame)
    return (
      <div>
        <input type="text" ref=input => (roomName = input) />
        <button
          className="button"
          onClick=() => 
            props.createRoom(roomName.value)
          
        >
          Create a room
        </button>
      </div>
    )
  else
    return (
      <div>
        <Redirect to=`/$props.currentGame[$props.username]` />
      </div>
    )

【讨论】：

如果你不介意你能解释一下为什么props.history.push 在渲染中不起作用

【参考方案2】：

做一件事，而不是编写条件并使用 history.push() 推送，如果您一开始就尝试这样做，只需将代码放在 componentDidMount() 中。

componentDidMount()
 if(condition)
   history.push('/my-url');