Question

我有以下警告：

警告：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。当用户创建游戏时，我想将他重定向到我在属性 currentGame 内分配的服务器生成的新URL，其中包含一个socket.io动作事件，该事件已经在组件Lobby已初始化。

但是，由于 currentGame 属性发生更改，因此重新呈现该组件，因此该行

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

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

有关如何修复它的想法吗？

谢谢！

Answer 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>
    )
}

Answer 2

做一件事，而不是编写条件并使用history.push（）进行推送，如果您想一开始就将代码放在componentDidMount（）中即可。

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

在无状态组件

2 个答案: