从导航道具设置初始状态答案

【问题标题】：Set initial state from navigation props从导航道具设置初始状态
【发布时间】：2018-05-16 13:44:35
【问题描述】：

我正在使用React Navigation 在屏幕之间进行路由。我有一个初始屏幕，其中包含一个FlatList，单击一个项目，我在传递这样的参数时路由到一个新屏幕。

props.navigation.navigate('Details', {
    id: props.id,
    title: props.title
});

在Details 屏幕中，我可以使用以下代码接收它，但是考虑到它是静态函数并且我无权访问this.setState()，我该如何设置状态。

static navigationOptions = ({navigation}) => {
    const {params} = navigation.state;

    console.log(params);
};

【问题讨论】：

如果你说它是一个静态函数，你所说的“设置状态”是什么意思。
@aravind_reddy 我想使用我从上一个屏幕传递给它的参数来初始化组件的状态。

标签： reactjs react-native react-native-android react-navigation react-native-navigation

【解决方案1】：

这将允许您在构造函数中处理它，这是过去放置在 componentWillMount 中的任何东西可以去的另一个位置。

constructor(props) {
    super(props)
    this.state = {
        params: props.navigation.state.params
    }
}

作为参考，通过将 props 作为参数传递给构造函数，然后在它们上运行超级函数，您可以在调用任何其他生命周期函数之前设置初始状态或运行其他一次性函数.

【讨论】：

@BrunoMazzardo 同意，我应该提到我正在寻找一种更 es6/es7 的方法，如果我在几天内没有收到任何答案，我会将其标记为正确的.
如果你想要 es7，那么就在你的班级里这样做： state = { params: this.props.navigation.state.params }
使用 getDerivedStateFromProps 代替。在构造函数中从 props 设置状态会导致错误。特别是如果您想在每次道具更改时更改状态。

【解决方案2】：

使用componentWillMount，而不是navigationOptions

componentWillMount(){
   this.setState({
       params:this.props.navigation.state.params
       })
 }

【讨论】：

componentWillMount 已弃用，不应使用 medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b
componentDidMount，我的错
这样可以，但不会错过初始渲染周期吗？
是的，你有更好的主意吗？

【解决方案3】：

对于任何正在寻找的人来说，这是我迄今为止设法让它发挥作用的方法。

export default class Detail extends React.PureComponent {

state = {
    id: this.props.navigation.getParam('id', -1),
    title: this.props.navigation.getParam('title', null)
};

render() {

        return (

            . . .

        );
    }

}

这使您可以使用初始状态初始化组件，这可能不是最好的方法，并且代码肯定可以进行一些解构，但我不知道如何去做，所以现在这可行。如果有人能提出一种更高效、更高效的方法，我会很高兴。

"dependencies": {
"react": "^16.3.1",
"react-native": "0.55.4",
"react-navigation": "^2.0.1"
}

【讨论】：

尝试使用 Nathan 答案。