Попытка вызова setState из основного компонента throw.js не смонтирована. Предупреждение

Question

В последние несколько дней у меня были серьезные проблемы с передачей информации о состоянии в пользовательский contentComponent моего createDrawerNavigator.Я решил сделать несколько частей контента глобальными, например, идентификатор пользователя, используя состояние app.js и просто передавая состояние в качестве 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

Я думаю, что вы получаете эту ошибку, потому что вы устанавливаете свое состояние в методе рендеринга вашего компонента.Вам нужно будет переместить его в метод жизненного цикла, например 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 () не является хорошей практикой.Я на самом деле не тестировал этот код, но если он не работает, вы можете попробовать отправить больше фрагментов кода.