我应该在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;来获得screne

获得this.props.navigation.state值和NOT render the page twice时如何更改状态？

---

我这样做了，状态是变化的，但是选项卡未渲染：

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

Answer 1

确实不需要为此使用state，并且React team不建议这样做（搜索“避免将道具复制到状态中”）。而是继续使用道具。

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

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

如果您真的想要的话，可以这样使用“ derived state”：

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

...

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