使用 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
  }
});

反应原生 0.40
macOS Sierra 10.12.3
三星 S4 （API 21）

Answer 1

很奇怪。我注释掉了大部分样式，它奏效了。所以我开始取消注释样式，直到它们再次全部取消注释并且它仍然有效。