使用if语句呈现组件不起作用

Question

当屏幕加载时，修改按钮和列表视图可见。

当我按下搜索时，列表视图消失，搜索输入呈现在按钮顶部。

当我继续按搜索时，它会切换搜索输入，但按钮仍然存在，列表视图永远不会重新出现。

如果我在列表视图下移动{this.renderSubHeader(showSearchInput)}，那么除了标题消失且列表视图仍然存在之外，会发生相同的事情。

import React, {Component} from 'react';
import {
  View,
  ListView,
  Text,
  StyleSheet
} from 'react-native';
import {is} from 'immutable';
import Colours from '../constants/Colours';
import GlossaryButton from '../components/GlossaryButton';
import SearchInput from '../components/SearchInput';
import Header from '../components/Header';
import Button from '../components/Button';
import CategoryService from '../storage/services/Category';
import UserTermService from '../storage/services/UserTerm';
import TermDetails from './TermDetails';
import LoadScreen from '../components/Loading';

type Props = {
  items: Object[],
  tabNavigation: Object
}

export default class UserTermList extends Component {
  props: Props;

  constructor (props) {
    super(props);

    const ds = new ListView.DataSource({
      sectionHeaderHasChanged: (s1, s2) => !is(s1, s2),
      rowHasChanged: (r1, r2) => !is(r1, r2)
    });

    this.state = {
      dataSource: ds,
      listData: null,
      userTerms: [],
      searchText: '',
      showSearchInput: false,
      loaded: false
    };
  }

  componentDidMount () {
    this.loadContent();
  }

  loadContent = async () => {
    const categories = await CategoryService.findAll();
    const userTerms = await UserTermService.findAll();

    const listData = await this.createListData(categories, userTerms);
    const dataSource = this.state.dataSource.cloneWithRowsAndSections(listData);

    this.setState({dataSource, listData, userTerms, loaded: true});
  };

  createListData = async (categories: Array, userTerms: Array): Object => {
    const listData = {};
    await Promise.all(categories.map(async (category) => {
      listData[category.title] = await this.getUserTermsFromCategory(category.baseTerm, userTerms);
    }));
    return listData;
  };

  getUserTermsFromCategory = async (categoryTerms: Array, userTerms: Array): Array => (
    categoryTerms.filter((term) => this.isTermInCategory(term.id, userTerms))
  );

  isTermInCategory = (termID: number, userTerms: Array): Boolean => {
    return userTerms.filter((term) => term.id === termID).length > 0;
    // return terms.length > 0;
  };

  navigateToTerm = (baseTermID: number) => {
    this.props.tabNavigation.push(TermDetails, {baseTermID});
  };

  filterSection = (section: string, text: string) => (
    this.state.listData[section].filter((section) => (
      section.term.toLowerCase().includes(text.toLowerCase())
    ))
  );

  filterList = (text: string) => {
    const listData = {};
    Object.keys(this.state.listData).map((section) => {
      const sectionArray = this.filterSection(section, text);
      sectionArray.length > 0 && (listData[section] = sectionArray);
    });
    return listData;
  };

  onSearchChanged = (text: string) => {
    const dataSource = this.state.dataSource.cloneWithRowsAndSections(this.filterList(text));
    this.setState({dataSource});
  };

  searchPressed = () => {
    this.state.showSearchInput ? this.setState({showSearchInput: false}) : this.setState({showSearchInput: true});
  };

  reviseWords = () => {
  };

  onItemSelected = (rowID: number, sectionID: string) => {
    const baseTermID = this.state.listData[sectionID][rowID].id;
    this.navigateToTerm(baseTermID);
  };

  renderRow = (rowData: Object, sectionID: string, rowID: number): GlossaryButton => (
    <GlossaryButton
      onButtonPress={this.onItemSelected}
      buttonText={rowData.term}
      sectionID={sectionID}
      rowID={rowID}/>
  );

  renderSectionHeader = (section: Object, sectionID: string): Text => (
    <Text style={styles.sectionText}>
      {sectionID}
    </Text>
  );

  renderSubHeader = (showSearchInput: boolean) => {
    if (showSearchInput) {
      return <SearchInput onChangeText={this.onSearchChanged}/>;
    }
    return (
      <Button
        style={styles.reviseButton}
        onButtonPress={this.reviseWords}
        buttonText={'Revise Words'}
        buttonColour={Colours.green}/>
    );
  };

  render () {
    const {loaded, showSearchInput} = this.state;
    //const renderSubHeader = this.renderSubHeader(showSearchInput);

    return (
      loaded ?
        <View style={styles.container}>
          <Header
            title={'My Terms'}
            actionText={'Search'}
            onActionPress={this.searchPressed}/>

          {this.renderSubHeader(showSearchInput)}

          <ListView
            style={styles.list}
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            renderSectionHeader={this.renderSectionHeader}
            keyboardShouldPersistTaps={'always'}
            renderEmptySections/>
        </View>
        : <LoadScreen/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 80,
    paddingBottom: 80,
    backgroundColor: Colours.grayVeryLight
  },

  reviseButton: {
    marginLeft: 10,
    marginRight: 10,
    marginTop: 20,
    marginBottom: 12
  },

  sectionText: {
    marginTop: 10,
    marginBottom: 10,
    fontSize: 18,
    fontFamily: 'Bariol-Bold',
    color: Colours.darkTextHalf
  },

  list: {
    flex: 1,
    padding: 4,
    paddingBottom: 16,
    marginLeft: 16,
    marginRight: 16
  }
});

react-native 0.40
macOS Sierra 10.12.3
三星S4（API 21）

Answer 1

很奇怪。我评论了大多数样式并且它起作用了。所以我开始取消注释样式，直到它们再次被取消注释，它仍然有效。