从导航属性设置初始状态

Question

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

- Jude Fernandes

---

如果你说它是一个静态函数，那么“设置状态”是什么意思？ - aravind_reddy

@aravind_reddy 我想使用从前一个屏幕传递给它的参数来初始化组件的状态。 - Jude Fernandes

Answer 1

这将允许您在构造函数中处理它，这是曾经放置在componentWillMount中的任何内容可以去到的另一个位置。

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

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

- Nathan Christian

---

@BrunoMazzardo同意，我应该提到我正在寻找一种更es6 / es7的方法来做到这一点，如果我在几天内没有收到任何答案，我将把它标记为正确的答案。 - Jude Fernandes

如果您想使用es7，请在您的类中执行以下操作： state = { params: this.props.navigation.state.params } - Nathan Christian

请使用getDerivedStateFromProps。在构造函数中从props设置状态会导致错误，特别是如果您想每次prop更改时都更改状态。 - Yasin Yaqoobi

Answer 2

使用componentWillMount，而不是navigationOptions。

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

- Bruno Mazzardo

---

componentWillMount已被弃用，不应再使用。https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b - Jude Fernandes

componentDidMount，我的错 - Bruno Mazzardo

那样做可以，但不会错过初始渲染周期吗？ - Jude Fernandes

是的，你有更好的想法吗？ - Bruno Mazzardo

Answer 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"
}

- Jude Fernandes

---

尝试使用Nathan的答案。 - Bruno Mazzardo