React Native 如何在onSubmit上调用在上下文中定义的函数？

6xfqseft 于 2023-04-12 发布在 React

关注(0)|答案(1)|浏览(163)

我想调用register函数onSubmit，但是当我试图控制它时，它显示undefined。我也试着像这样使用register，它仍然是undefined。

Auth.js

const AuthProvider = ({children}) => {
const [signUp, setSignUp] = useState([]);
const [formData, setFormData] = useState(FORM_FIELDS);

const authState = {
  signUpData: signUp,
  setSignUp: setSignUp,
  setFormData: setFormData,
  formData: formData,
  register: handleRegister,
};

  const handleRegister = async () => {
   const response = await axios
    .post(process.env.API_BASE_URL + API_ENDPOINTS.SIGN_UP, {
     email: formData.email,
     first_name: formData.firstName,
     last_name: formData.lastName,
     password: formData.password,
   })
   .then(data => console.log(data, 'apiData'));
 console.log(response, 'response');
};

 return (
   <ApiContext.Provider value={authState}>{children}</ApiContext.Provider>
  );
};
export const ApiContext = createContext(AuthProvider);

export default AuthProvider;

Register.js

export default function MultiStepSignUp() {
     const auth = useAuth();
     const onSubmit = () => {
      console.log(auth.register, 'auth');
     // here console shows undefined
    };

useAuth.js

import {useContext} from 'react';
import {ApiContext} from 'src/context/ApiContext';

export const useAuth = () => useContext(ApiContext);

react-native

来源：https://stackoverflow.com/questions/75937196/how-to-call-a-function-defined-in-context-on-onsubmit

1条答案

按热度按时间

t2a7ltrp1#

以下是详细的答案和简化的答案。
这是IntroContext.js

import React, {useState} from 'react';
const initialState = {
  isLoggedIn: false,
  userData: null,
  setIsLoggedIn: () => {},
  setUserData: () => {},
};
const IntroContext = React.createContext(initialState);

function IntroProvider({children}) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userData, setUserData] = useState(null);
  return (
    <IntroContext.Provider
      value={{
        isLoggedIn,
        setIsLoggedIn,
        userData,
        setUserData,
      }}>
      {children}
    </IntroContext.Provider>
  );
}
export {IntroContext, IntroProvider};

如何在App.js文件中使用

import React from 'react';
import {IntroProvider} from './src/context/IntroContext';
import App from './src/navigations/Index';
const MainApp2 = () => {
  return (
    <IntroProvider>
      <App />
    </IntroProvider>
  );
};

export default MainApp2;

这里你可以在LoginScreen.js中使用它

import React, {useContext, useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {IntroContext} from '../context/IntroContext';

const LoginScreen = () => {
  const {setIsLoggedIn, setUserData} = useContext(IntroContext);
  const [user_data, setuserdata] = useState({
    first_name: 'Jhon',
    last_name: 'Burg',
    mobile_number: '+923495544123',
  });
  const onPressAccept = async () => {
    setUserData(user_data);
    setIsLoggedIn(true);
  };

  return (
    <View style={styles.container}>
      <View style={styles.btnsView}>
        <TouchableOpacity style={styles.btn} onPress={() => onPressAccept()}>
          <Text style={styles.btnText}>Accept</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({});

export default LoginScreen;

如果你有任何困惑，请在评论中询问。

赞(0）回复(0）举报 2023-04-12

我来回答

React Native 如何在onSubmit上调用在上下文中定义的函数？

1条答案

相关问题

热门标签

最新问答