я должен установить состояние в compoenentDidMount?

Question

У меня есть AppContainer, который представляет собой другой экран, отображаемый в:

class AppContainer extends Component {

state= {
  Home: false
}

renderFooterTab = () => {
    return this.footerItems.map((tabBarItem, index) => {
      return (
        <GlobalFooterTab
          key={index}
          title={tabBarItem.title}
          selected={tabBarItem.selected}
        />
      );
    });
  };

render() {
    return (
      <Container>
        <StatusBar />
        {this.renderHeader(this.props)}
        <Content {...this.props} contentContainerStyle={{ flexGrow: 1 }}>
          {this.props.children}
        </Content>
        {this.renderFooter(this.props)}
      </Container>
    );

footerItems = [
    {
      screen: 'home',
      title: 'Home,
      selected: this.state.isHome
    }...
]
}

Используя реактивную навигацию, я могу получить экран, используя this.props.navigation.state;

Как я могу изменить состояние, когдаЯ получаю значение this.props.navigation.state и NOT render the page twice?

---

Я сделал это, состояние изменилось, но вкладка не отображается:

 componentDidMount() {
    this.setState({
      isHome: false
    });
  }

Answer 1

Нет необходимости использовать state для этого, и команда React не поощряет это (поиск «Избегайте копирования реквизитов в состояние»). Вместо этого просто продолжайте использовать реквизит.

const { routeName } = this.props.navigation.state;

footerItems = [
  {
    screen: 'home',
    title: 'Home,
    selected: routeName === 'Home'
  }...
]

Если вы действительно хотите, вы можете использовать " производное состояние ", например:

const { routeName } = this.props.navigation.state;
const isHome = routeName === 'Home';

...

footerItems = [
  {
    screen: 'home',
    title: 'Home,
    selected: isHome
  }...
]