Question

我有一个类Two，里面有很多函数。其中一些人正在使用this.setState({})，他们向我发出警告：setState(...): Can only update a mounted or mounting component.

以下是代码示例：

class One extends React.Component {
  constructor() {
    super()
    this.two = new Two;
  }

  componentDidMount() {
    this.two.hello()
  }

  render() {
    return (<View><Text>Hello World!</Text></View>)
  }
}

class Two extends React.Component {
  constructor() {
    super()
    this.state = {
      connected: false
    }
  }

  hello() {
    this.setState({connected: true}) //This one throw the warning
  }
}

有没有办法以更好的方式做事？由于我的班级Two是功能性的，我不想过多地改变代码以使事情有效。顺便说一句，我需要this.two = new Two行。

我应该创建一个库，一个模块还是其他什么？如果是这样，你能给我一个很好的教程吗？

Answer 1

如果您没有安装组件，React无法使用它的内置状态处理程序更新它的状态。

既然你没有安装它，它根本不应该是反应组件。请尝试使用常规类：

class Two {
  constructor() {
    super()
    this.state = {
      connected: false
    }
  }
  hello() {
    this.state.connected = true
  }
}

Answer 2

这里的主要问题是你试图让React中的组件以非常规的方式进行通信。

你想要做的就是利用道具。这就是组件在React中相互交流的方式，而不是像你正在尝试的那样是直接的。

Check out my code here where I'm doing the same as you

基本上，我在这里写了2个例子。第一种是将原始数据传递到另一个组件。（this.props.data.someData）。而第二个，更像你想要做的，是使用React's Life Cycle methods，通过prop激活来监听函数应该运行的时间。

在我的示例中，这意味着runFunction道具传递到Two时，无论是首次创建componentDidMount()还是稍后设置为真componentWillRecieveProps()，它将运行testFunction()

在新Object上反应本机setState

2 个答案: