反应导航参数不重置？

Question

我有过滤屏幕和搜索屏幕。当用户从搜索屏幕导航时，我将搜索术语从搜索屏幕传递到主屏幕。同样，我正在为滤清器屏幕（将过滤器从过滤器屏幕传递到主屏幕）。

。

现在，当我从滤清器屏幕到主屏幕时，我想将搜索项设置为null，同样，如果我从搜索屏幕到主屏幕，我想将FilterOptions设置为null？

在下面的代码行A和B行中，没有将filterOptions和searchTerm设置为NULL，这就是为什么过滤器和搜索无法正常工作，因为当filterOptions不是null时，我希望搜索term为null，这意味着只有过滤器应在该实例上工作。同样，如果filterOptions为null，则搜索术语不得为null，这意味着仅在该实例上搜索。

代码：

filterProjectResults = (projects) => {
      let filterOptions = this.props.navigation.getParam('filterOptions', null);
      let searchTerm = this.props.navigation.getParam('searchTerm', null);
      console.log('Initial filterOptions ', filterOptions);  --> initially null
      console.log('intital searchTerm ', searchTerm); --> initially null

      if(filterOptions !== null){ 
        console.log('Inisde filter screen ', filterOptions)
        let display_filtered_projects = projects.filter((item) => item.floorplans.some(val => filterOptions.includes(val.bhk)));
        searchTerm = null;  <--- Line A
        return display_filtered_projects;
      } else if (searchTerm !== null) {
        console.log('Inside Search screen ', searchTerm);
        let search_filter_projects = projects.filter(
          (project) => {
            return project.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
          }
        );
        filterOptions = null;   <<--- Line B
        return search_filter_projects;
      }
  }

search.js：

<TouchableOpacity onPress={() => this.props.navigation.navigate('Projects', {searchTerm : this.state.text})}>
    <Image source={require('../../assets/images/search.png')} style={{width: 24, height: 24, resizeMode: 'contain'}}/>
</TouchableOpacity>

filter.js：

<TouchableOpacity onPress={() => this.props.navigation.navigate('Projects', {filterOptions: this.state.filterOptions})}>
    <View style={styles.filterButton}>
        <Text style={styles.filterButtonText}>Apply Filters</Text>
    </View>
</TouchableOpacity>

我正在将此过滤或搜索的数据传递到flatlist中以显示结果。如果我尝试使用状态实现它，我会发现错误 -> https：//i.stack.imgur.com/g4l1o.jpg代码：https：//gist.github.com/aditodkar/1df0175e2b1372727daaae0373040373040f8ddcf8dcf8dcff8dcffun/div>

呼叫

this.props.navigation.navigate('Projects', {searchTerm : this.state.text})}>您还可以像这样添加filterOptions: null

this.props.navigation.navigate('Projects', {searchTerm : this.state.text, filterOptions: null})}？

，然后对于另一个可以调用

this.props.navigation.navigate('Projects', {searchTerm : this.state.text, searchTerm: null})}

您也可以致电this.props.navigation.setParams(params)并随时设置为null。

希望有帮助！

您可以使用导航生命周期on blur更新参数时，当屏幕离开事件离开事件时，也必须指定您的参数，因为参数确实具有浅更新而不是覆盖值

search.js：

import {useFocusEffect} from '@react-navigation/native';
import React, {useCallback} from 'react';
useFocusEffect(
    useCallback(() => {
      return () => {
        navigation.setParams({ searchTerm: null });
      };
    }, []),
);

github上的这个问题，第6674期，是同一问题。

这是默认行为。