Блог

Главная - Вопросы по программированию - эта.функция не является ошибкой функции в собственной навигации react

эта.функция не является ошибкой функции в собственной навигации react

#reactjs #react-native

Вопрос:

Я хочу перейти handleLogin App.js к home.js , однако, когда я это делаю, я получаю ошибку: [TypeError: this.props.extraData.handleLogin is not a function. (In 'this.props.extraData.handleLogin(data)', 'this.props.extraData.handleLogin' is undefined)] Как правильно передать функцию в навигаторе стека, чтобы я мог использовать ее props в другом компоненте? Мне кажется, я что-то упускаю из this контекста

App.js:

 export default class App extends Component {
  constructor() {
    super();

    this.state = {
      loggedInStatus: "NOT_LOGGED_IN",
      user: {}
    };
    console.log("APP PROPS", this)
    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
  }


handleLogin(data) {
    this.setState({
      loggedInStatus: "LOGGED_IN",
      user: data.user
    });
  }

render() {
    return (
    <NavigationContainer>
       <Stack.Navigator>
       <Stack.Screen name="Home" >

       {props => <Home {...props} extraData={this.handleLogin}/>}
        </Stack.Screen>
        <Stack.Screen name= "Login" >
        {props =>  <Login {...props}/>}
        </Stack.Screen>
        <Stack.Screen name="Registration">
         {props =>  <Registration {...props} extraData={this.handleLogin, this.handleLogout, this.loggedInStatus}/>}

         </Stack.Screen>
       </Stack.Navigator>
     </NavigationContainer>
    );
  }
}

Home.js:

 export default class Home extends Component {
  constructor(props) {
    super(props);
    console.log("HOME PROPS", this.props)
    this.handleSuccessfulAuth = this.handleSuccessfulAuth.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
  }

  handleSuccessfulAuth(data) {
    this.props.extraData.handleLogin(data);
    this.props.history.push("/dashboard");
  }

Комментарии:

1. Вы определили handleLogin? У вас нет кода, который вы предоставили.

2. ах, извините, я упустил из виду, что внес правку, спасибо

Ответ №1:

Похоже, вы не смогли передать правильный extraData объект реквизита. У объекта должны быть ключи, соответствующие передаваемым вами значениям, т. е. для this.props.extraData.handleLogin extraData объекта должно быть handleLogin свойство.

 <Stack.Screen name="Home" >
  {props => (
    <Home
      {...props}
      extraData={{ handleLogin: this.handleLogin }}
    />
  )}
</Stack.Screen>
...
<Stack.Screen name="Registration">
  {props =>  (
    <Registration
      {...props}
      extraData={{
        handleLogin: this.handleLogin,
        handleLogout: this.handleLogout,
        loggedInStatus: this.loggedInStatus,
      }}
    />
  )}
</Stack.Screen>

ПРИМЕЧАНИЕ: Во фрагменте вашего App компонента отсутствуют эти определения функций, поэтому убедитесь, что все они определены.

Комментарии:

1. Эй, спасибо тебе! Это сработало, я даже не понял, что передаю их неправильно, я рассматривал значение, которое я передал, как словарь

Ответ №2:

Вы неправильно отправляете реквизит:

App.js

 <Stack.Screen name="Registration">
  {(props) => (
    <Registration
      {...props}
      extraData={{
        handleLogin: this.handleLogin,
        handleLogout: this.handleLogout,
        loggedInStatus: this.loggedInStatus,
      }}
    />
  )}
</Stack.Screen>;

Также убедитесь, что вы определили те функции, в которые вы отправляете Home.js , определены App.js .

Метки: