React Native 更改 let 值不会在子组件中更改为道具答案

【问题标题】：React Native changing let value does not get changed in child component as propsReact Native 更改 let 值不会在子组件中更改为道具
【发布时间】：2019-05-25 10:41:54
【问题描述】：

嘿，我有点卡在这个问题上。整个问题是我不能在 navigationOptions 中使用状态。所以我尝试了这个：

我声明我让let isFilterVisible: boolean = false;

有一个 navigationOptions 块，我在 onPress 事件中调用函数。

static navigationOptions = ({ navigation }: NavigationInjectedProps) => ({
    headerRight: (
            <FilterButton onPress={() => {Installations.handleFilterVisibility(isfilterVisibile)}}/>
   ),
});

我处理值的简单 static 函数

static handleFilterVisibility(filterVisibility: boolean){
    isfilterVisibile = !filterVisibility;
}

然后它作为道具传递给孩子

<Filter isFilterVisible={isfilterVisibile}/>

一切似乎都很好，但是当我尝试在子组件中记录道具时。

ComponentDidUpdate 甚至 ComponentWillReceiveProps 也不会记录任何内容。

有什么想法可能是错误的吗？

【问题讨论】：

这些函数以小写c开头；有没有可能因为你有ComponentDidUpdate，他们一开始就没有被叫到？
最好提供整个代码sn-p。
是的，尝试在codesandbox.io上创建minimal reproducible example。
@ChrisG 只是我的错字。它在代码中是小写的。关于codesanbox。想试试，但我的项目真的很复杂，很难将它复制到 sanbox。
不要复制整个项目。您需要创建一个重现问题的最小示例。（这是让人们调试代码的技巧）

标签： javascript typescript react-native ecmascript-6 jsx

【解决方案1】：

所以最后我解决了这个感谢导航params，解决方案：

static navigationOptions = ({ navigation }: NavigationInjectedProps) => ({
    headerRight: (
            <FilterButton onPress={() => {
                const {params = {}} = navigation.state;
                params.handleFilterVisibility()
            }}/>
    ),
});

handleFilterVisibility = () => {
    const { isFilterVisible } = this.state;
    const { navigation } = this.props;
    this.setState({isFilterVisible: !isFilterVisible}, () => {
        navigation.setParams({ 
            isFilterVisible
        });
    })
}

componentDidMount() {
    const { navigation } = this.props;
    const { isFilterVisible } = this.state;
    navigation.setParams({
        handleFilterVisibility: this.handleFilterVisibility,
        isFilterVisible
    });
}

【讨论】：