传递给自定义标头组件的道具为未定义

Question

所以，我有一个具有自定义标题的仪表板组件。在仪表板组件中，我进行了API调用并设置了参数，并将其传递给标头组件。我想将userName和pgAddress作为道具传递给标头组件。

class Dashboard extends React.Component {


  componentDidMount = async () => {
    try {
      const { data } = await client.post('sjsjdldlksd');
      console.log(data.HostelName, data.TenantName);

      this.props.navigation.setParams({
        userName: data.TenantName,
        pgAddress: data.HostelName,
      });
    } catch (e) {
      console.log(e.message);
    }
  };


Dashboard.navigationOptions = {
  header: (props) => (
    <Header
      navigation={props.navigation}
      userName={props.navigation.getParam('userName')}//using getParams because state.params doesn't work
      pgAddress={props.navigation.getParam('pgAddress')}
      value={2}
    />
  ),
};

而且我正在使用props.userName和props.pgAddress访问这两个。它们都未定义。我在这里做错了什么？谢谢。

Answer 1

这些参数尚不存在，因此起初它们是undefined。在等待getParam之后加载实际参数时，请使用componentDidMount的第二个参数提供备用。

例如：

props.navigation.getParam('userName', '')

尝试将函数传递给navigation而不是传递给navigationOptions来获取header道具：

Dashboard.navigationOptions = ({ navigation }) => {
  header: (
    <Header
      navigation={navigation}
      userName={navigation.getParam('username', 'fallbackUsername')
      pgAddress={navigation.getParam('pgAddress, 'fallbackPgAddress')
      value={2}
    />
  )
}