Question

最近几天，在将状态信息纳入我的contentComponent的自定义createDrawerNavigator中以来，我遇到了一些重大问题。我决定使用app.js的状态将一些内容全局化，例如用户ID，并将状态如screenProps传递给路由器。

App.js

state = {
    score:0,
    rank:0,
}
setScore = (value) => this.setState({score:value});
setRank = (value) => this.setState({rank:value});

render() {
  const globalProps={
      state:this.state,
      setScore:this.setScore,
      setRank:this.setRank
  }

let RootNav = createRootNavigator();
return (
    <RootNav screenProps={globalProps}></RootNav>
);

Router.js

contentComponent: ({ navigation, screenProps}) => (
  <DrawerContent navigation={navigation} screenProps={screenProps}/>
),

Child.js

this.props.screenProps.setScore(5);

我可以访问数据，但是当我从孩子那里调用setState时，我得到警告，告诉我app.js已卸载。我的理解是app.js始终挂载并运行，因为它包含您的整个应用程序？如果有人对此有解决方案，将不胜感激。

Answer 1

我认为您正在收到此错误，因为您正在组件的render方法中设置状态。您将需要将其移至诸如componentDidMount（）之类的生命周期方法中。请参见下面的重构代码示例。

state = {
  score:0,
  rank:0,
}
setScore = (value) => this.setState({score:value});
setRank = (value) => this.setState({rank:value});

componentDidMount(){
   const globalProps={
      state:this.state,
      setScore:this.setScore,
      setRank:this.setRank
  }
}

render() {

 let RootNav = createRootNavigator();
 return (
   <RootNav screenProps={globalProps}></RootNav>
);

componentDidMount（）每次在调用组件或更改数据/状态时运行。我认为在render（）中设置状态不是一个好习惯。我还没有实际测试过此代码，但是如果不起作用，则可以尝试发送更多代码段。

尝试调用主app.js的setState引发组件未安装警告

1 个答案: