Reactjs 如何让导入的函数设置功能组件的状态？

我有一个react类组件，其中包含相当长的onSubmit函数，为了使代码更整洁，我将其放入了另一个文件中

我尝试将类组件转换为函数组件，用useState替换我的所有state和setState函数，但现在我的useState状态更新程序在导入的函数中返回undefined。我是否能够使用带有功能组件的导入函数更新状态？当该函数被导入到类组件中，并且我的状态更新程序是setState（）时，它运行良好

//在utils.js中导入的函数
导出常量登录用户=异步函数（电子邮件、密码）{
试一试{
const login=wait axios.post（'http://localhost:5000/api/v1/auth/login', {
电子邮件，
密码
});
常量选项={
标题：{
授权：`Bearer${login.data.token}`
}
};
const getUser=wait axios.get(
'http://localhost:5000/api/v1/auth/me',
选择权
);
const user=getUser.data.data；
setAuthenticated（true）；
setUser（getUser.data.data）；
setEmail（“”）；
设置密码（“”）；
setItem（'user'，JSON.stringify（user））；
log（localStorage.getItem（'user'））；
}捕捉（错误）{
控制台日志（err）；
}
};
//具有导入功能的功能组件
从“React”导入React，{useState}；
从“axios”导入axios；
从“道具类型”导入道具类型；
从“/Login”导入{Login}；
const{loginUser}=require（'../utils/utils'）；
导出常量Splash=（）=>{
const[user，setUser]=useState（null）；
const[error，setError]=useState（null）；
const[authenticated，setAuthenticated]=使用状态（false）；
const[msg，setMsg]=useState（“”）；
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const_handleEmail=（e）=>{
setEmail（例如target.value）；
};
常数handlePass=（e）=>{
设置密码（如目标值）；
};
常量handleSubmit=async（e）=>{
e、 预防默认值（）；
登录用户（电子邮件、密码）；
如果（用户）{
console.log（用户）；
this.props.onHandleUser（用户）；
}
};
返回(
{！已验证&&(
)}
);
};D

编辑：我的问题是setAuthenticated、setUser、setEmail和setPassword在utils.js中没有定义

---

谢谢

在调用之前，您需要将setAuthenticated函数传递给登录用户函数。

在调用之前，您需要将setAuthenticated函数传递给登录用户函数。

从登录用户挂钩返回onSubmiHandler函数

const doLogin = (email , password) => {

  /// your code here

}

return {doLogin}

然后在主组件中使用doLogin函数

  //inside functional component

  const {doLogin} = loginUser();

  
  onSubmit = () => doLogin(email, password)

有关更多信息，您可以从这里了解如何使用自定义挂钩

---

从登录用户挂钩返回onSubmiHandler函数

const doLogin = (email , password) => {

  /// your code here

}

return {doLogin}

然后在主组件中使用doLogin函数

  //inside functional component

  const {doLogin} = loginUser();

  
  onSubmit = () => doLogin(email, password)

有关更多信息，您可以从这里了解如何使用自定义挂钩

---

启动登录用户无法知道设置状态您在此处插入的尝试将其作为参数传递，它将修复启动登录用户无法知道设置状态您在此处插入的尝试将其作为参数传递，它将修复实现这一点的一种方法是将所有设置的方法作为参数传递给

logiuser

函数

但更好的方法是：

创建两个单独的文件

1用于登录api调用，如：

login.js

function login(email, password){
    const login = await axios.post('http://localhost:5000/api/v1/auth/login', {
        email,
        password
    });
    return login.data;
}

另一种用于获取数据的方法

getProfile.js

function getProfile(token){
    const options = {
        headers: {
            Authorization: `Bearer ${token}`
        }
    };
    const getUser = await axios.get(
        'http://localhost:5000/api/v1/auth/me',
        options
    );
    return getUser.data;
}

现在，您是否在实际组件提交调用函数中设置状态内容，如

const _handleSubmit = async (e) => {
    e.preventDefault();
    const token = await login(email, password);
    const user = await getProfile(token);
    if (user) {
        console.log(user);
        props.onHandleUser(user);
        setAuthenticated(true);
        setUser(getUser.data.data);
        setEmail('');
        setPassword('');

        localStorage.setItem('user', JSON.stringify(user));
        console.log(localStorage.getItem('user'));
    }
};

---

实现这一点的一种方法是将所有set方法作为参数传递给

logiuser

函数

但更好的方法是：

创建两个单独的文件

1用于登录api调用，如：

login.js

function login(email, password){
    const login = await axios.post('http://localhost:5000/api/v1/auth/login', {
        email,
        password
    });
    return login.data;
}

另一种用于获取数据的方法

getProfile.js

function getProfile(token){
    const options = {
        headers: {
            Authorization: `Bearer ${token}`
        }
    };
    const getUser = await axios.get(
        'http://localhost:5000/api/v1/auth/me',
        options
    );
    return getUser.data;
}

现在，您是否在实际组件提交调用函数中设置状态内容，如

const _handleSubmit = async (e) => {
    e.preventDefault();
    const token = await login(email, password);
    const user = await getProfile(token);
    if (user) {
        console.log(user);
        props.onHandleUser(user);
        setAuthenticated(true);
        setUser(getUser.data.data);
        setEmail('');
        setPassword('');

        localStorage.setItem('user', JSON.stringify(user));
        console.log(localStorage.getItem('user'));
    }
};

---

通常在应用程序中，用户登录后，他们希望重定向到另一个页面。为什么在您的案例中没有重定向功能？为什么在提交表单后需要重新初始化电子邮件和密码。提交表单后，表单没有任何用途。通常在应用程序中，用户登录后，他们希望重定向到另一个页面。为什么在您的案例中没有重定向功能？为什么在提交表单后需要重新初始化电子邮件和密码。提交表单后，表单没有任何用途。你说的是pass setAuthenticated、setEmail等。。。作为论据？我该怎么做？是 啊这是一项正在进行的工作。在发布之前，我可能没有完全正确地编写代码。很抱歉首先，每个人都可以问，不管代码是好是坏，我都会编辑我的帖子你是说passsetauthenticated，setEmail，等等。。。作为论据？我该怎么做？是 啊这是一项正在进行的工作。在发布之前，我可能没有完全正确地编写代码。很抱歉首先，每个人都可以问，不管代码是好是坏，我都会正确编辑我的postYou，但他在将来仍然会遇到问题，因为使用了这个关键字，并尝试访问道具，而不在（）中输入道具您是对的，但由于使用此关键字，他在将来仍然会遇到问题，并尝试在（）this.props.onHandleUser中输入props而不访问props是有问题的，因为在功能组件中，您只需要使用props而不需要使用this.props，因为this用于类components@TalOrlanczykY