Javascript React Native仅在过滤两次后保存过滤的更改

我正在做一个小项目，在表上有过滤选项。每当我尝试按ID、状态等筛选表中的内容时，只有在我两次确认更改后，才会进行筛选。如果我按一次过滤器按钮，它会将我带回表格，如果我重复这个过程，第二次呈现所有内容

class FiltersScreen extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      checkbox: this.props.filtersState.checkbox || {},
      input: this.props.filtersState.input || {},
      radio: this.props.filtersState.radio || {},
      select: this.props.filtersState.select || {},
      'date-picker': this.props.filtersState['date-picker'] || {}
    }
  }

  handleToggleCheckBox = (sectionName, checkboxName, checkBoxValue) => this.setState({
    checkbox: {
      ...this.state.checkbox,
      [sectionName]: {
        ...this.state.checkbox[sectionName],
        [checkboxName]: checkBoxValue
      }
    }
  })

  handleInputChange = (sectionName, inputName, inputValue) => this.setState({
    input: {
      ...this.state.input,
      [sectionName]: {
        [inputName]: inputValue
      }
    }
  })

  handleSelectItem = (sectionName, selectedItem) => {
    if (this.state.select[sectionName] === undefined) {
      this.setState({
        select: {
          ...this.state.select,
          [sectionName]: [selectedItem]
        }
      })
    } else {
      this.setState({
        select: {
          ...this.state.select,
          [sectionName]: [
            ...this.state.select[sectionName],
            selectedItem
          ]
        }
      })
    }
  }

  handleRemoveItem = (sectionName, selectedItem) => this.setState({
    select: {
      ...this.state.select,
      [sectionName]: _remove(
        ...this.state.select[sectionName],
        (item) => item.id !== selectedItem.id
      )
    }
  })

  handleRadioChange = (sectionName, radioValue) => this.setState({
    radio: {
      ...this.state.radio,
      [sectionName]: radioValue
    }
  })

  handleDateChange = (sectionName, inputValue) => this.setState({
    'date-picker': {
      ...this.state['date-picker'],
      [sectionName]: inputValue
    }
  })

  renderItem = ({ item }) => {
    const section = item
    if (section.type === 'input') {
      return <InputSection state={this.state} section={section} onChange={this.handleInputChange} />
    } else if (section.type === 'select') {
      return <SelectSection state={this.state} section={section} choices={this.props.dataset[section.name]} onSelectItem={this.handleSelectItem} onRemoveItem={this.handleRemoveItem} />
    } else if (section.type === 'radio') {
      return <RadioSection state={this.state} section={section} onRadioChange={this.handleRadioChange} />
    } else if (section.type === 'date-picker') {
      return <DatePickerSection state={this.state} section={section} onDateChange={this.handleDateChange} />
    } else if (section.type === 'checkbox') {
      return <CheckBoxSection state={this.state} section={section} onToggleCheckBox={this.handleToggleCheckBox} />
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return false
  }

  render () {
    return (
      <Screen
        preset='fixed'
        style={{ padding: 0 }}
        title='Filters'
        leftComponent={() => <Appbar.BackAction onPress={this.props.onGoBack} />}
        rightComponent={() => <Appbar.Action icon='check' onPress={() =>this.props.onSaveFilters(this.state )} />}
      >
        <FlatList
          data={this.props.sections}
          keyExtractor={(section, index) => String(index)}
          ItemSeparatorComponent={() => <Divider />}
          renderItem={this.renderItem}
          initialNumToRender={2}
          maxToRenderPerBatch={2}
          windowSize={5}
          removeClippedSubviews
        />
      </Screen>
    )
  }
}

FiltersScreen.propTypes = {
  filtersState: PropTypes.object,
  dataset: PropTypes.object,
  sections: PropTypes.arrayOf(PropTypes.object).isRequired,
  onGoBack: PropTypes.func,
  onSaveFilters: PropTypes.func.isRequired
}

export default FiltersScreen

类过滤器屏幕扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
复选框：this.props.filtersState.checkbox |{}，
输入：this.props.filtersState.input | |{}，
收音机：this.props.filtersState.radio | |{}，
选择：this.props.filtersState.select | |{}，
“日期选择器”：this.props.filtersState['date-picker']|{
}
}
handleToggleCheckBox=（sectionName、checkboxName、checkBoxValue）=>this.setState({
复选框：{
…this.state.checkbox，
[部门名称]：{
…this.state.checkbox[sectionName]，
[checkboxName]：checkBoxValue
}
}
})
handleInputChange=（sectionName、inputName、inputValue）=>this.setState({
输入：{
…此.state.input，
[部门名称]：{
[inputName]：inputValue
}
}
})
handleSelectItem=（sectionName，selectedItem）=>{
if（this.state.选择[sectionName]==未定义）{
这是我的国家({
选择：{
…this.state.select，
[部分名称]：[选择编辑项]
}
})
}否则{
这是我的国家({
选择：{
…this.state.select，
[部门名称]：[
…此.state。选择[sectionName]，
选择项
]
}
})
}
}
handleremovietem=（sectionName，selectedItem）=>this.setState({
选择：{
…this.state.select，
[节名]：\u删除(
…此.state。选择[sectionName]，
（项目）=>item.id！==selectedItem.id
)
}
})
handleRadioChange=（sectionName，radioValue）=>this.setState({
电台：{
…这是国家电台，
[部分名称]：radioValue
}
})
handleDateChange=（sectionName，inputValue）=>this.setState({
“日期选择器”：{
…此.state['date-picker']，
[部分名称]：输入值
}
})
renderItem=（{item}）=>{
常量段=项目
如果（section.type==='input'）{
返回
}else if（section.type==='select'）{
返回
}else if（section.type==='radio'）{
返回
}else if（section.type===‘日期选择器’）{
返回
}else if（section.type===“复选框”）{
返回
}
}
shouldComponentUpdate（下一步，下一步状态）{
返回错误
}
渲染（）{
返回(
}
rightComponent={（）=>this.props.onSaveFilters（this.state）}/>}
>
字符串（索引）}
ItemSeparatorComponent={（）=>}
renderItem={this.renderItem}
initialNumToRender={2}
maxToRenderPerBatch={2}
WindowsSize={5}
RemoveClipped子视图
/>
)
}
}
FiltersScreen.propTypes={
filtersState:PropTypes.object，
数据集：PropTypes.object，
节：PropTypes.arrayOf（PropTypes.object）.isRequired，
onGoBack:PropTypes.func，
onSaveFilters:PropTypes.func.isRequired
}
导出默认过滤器屏幕

过滤器是什么意思？您没有在提供的代码中使用任何筛选函数。