Question

我的应用程序有两个页面：主要和 CreateProfile 。 React-router用于导航。

用户流程

从主要
使用hashHistory.push('/');

CreateProfile

使用POPS

主要

呈现主要后，似乎React-Router会自动componentWillReceiveProps() 主要，但主要无法卸载

之后，我可以在 Main 的this.setState({ ... })内成功更新状态。但是，当用户单击 Main 中的按钮并且按钮的侦听器调用this.state时，我会收到以下错误。

警告：setState（...）：只能更新已安装或安装的组件。

按钮监听器似乎对{{1}}有过时的引用。

如何解决此问题？

编辑：这可能不是特定于路由器的路由器问题。可能是听众没有正确绑定，但我无法确认。

Answer 1

这可能是因为您在构造函数中调用this.setState({..})而导致的。相反，请尝试在componentWillMount或componentDidMount;）

中调用它

编辑：React路由器不会卸载组件，但它会传递新的道具。可以使用componentWillReceiveProps(nextProps)

捕获这些内容

Answer 2

问题是，在render()内，我正在调用箭头函数。因此，他们有一个过时的this绑定他们。以下代码有效。

_renderListItem() {
  return <ListItem
    onTouchTap={
      () => {
        this.setState({foo: 'bar'})
      }
    }
    primaryText={'Test'}
  />
}

render() {
  return (
    <List>
      {this._renderListItem()}
    </List>
  )
}

但是，如果我要从

更改，我会收到错误（如下）

_renderListItem() { ... }

到箭头式

_renderListItem = () => { ... }

警告：setState（...）：只能更新已安装或已安装成分

Reactjs - 不能在按钮侦听器中设置setState

2 个答案: