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

Question

我想调用注册函数onSubmit，但是当我尝试控制台它时，它显示未定义。 我也尝试像这样使用

register

 const {register} = useContext(ApiContext);

但它仍然是未定义的。

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);

Answer 1

这是详细信息和简化答案。

这是 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: '[phone]',
  });
  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;

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