React Ionic集合从方法调用警报

Question

我根据api的http响应创建了一个警报。我为登录功能制作了一个单独的ts文件。我想要的是根据响应调用或显示警报。如果函数没有与组件分离，我的代码就会工作。但当我这样做的时候，它就不起作用了。我是新来的反应和离子。

登录.tsx

import login from '../../methods/login';
export const Login: React.FC = () => {
const [email, setEmail] = useState('');
const [ password, setPassword ] = useState('');
const [errorAlert, showError] = useState(false);
const [unauthrozedAlert, showUnauth] = useState(false);
function loginAuth(){
login(email,password)
}
return (
<IonPage>
//forms here
//forms here
<IonAlert
isOpen={errorAlert}
onDidDismiss={() => showError(false)}
header={'Alert'}
message={'Check your inputs'}
buttons={['OK']}
/>
<IonAlert
isOpen={unauthrozedAlert}
onDidDismiss={() => showUnauth(false)}
header={'Alert'}
message={'Account not found'}
buttons={['OK']}
/>
</IonPage>
);
};
export default Login;

login.ts

export default function login(email:string,password:string) {
const PROXY_URL = 'https://cors-anywhere.herokuapp.com/';
axios.post(PROXY_URL+'http://52.74.70.6/api/auth/login',{
email:email,
password:password
},{ 
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
}
}).then((res)=>{
console.log(res)
}).catch((err)=>{
if (err.response.status == 404) {
console.log(err.response.status);
errorAlert(true)
}
if (err.response.status == 401) {
showUnauth(true)
console.log(err.response.status);
}
})
}

我得到了Cannot find name 'errorAlert'. TS2304

Answer 1

我发现我可以使用本地javascript代码进行警报，因为jsx希望在使用toast时使用组件。

export default function login(email:string,password:string) {
const PROXY_URL = 'https://cors-anywhere.herokuapp.com/';
axios.post(PROXY_URL+'http://52.74.70.6/api/auth/login',{
email:email,
password:password
},{ 
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
}
}).then((res)=>{
console.log(res)
}).catch((err)=>{
if (err.response.status == 404) {
console.log(err.response.status);
alert404()
}
if (err.response.status == 401) {
console.log(err.response.status);
}
})
}

我创建了另一个基于状态调用的函数

function alert404() {
const alert = document.createElement('ion-alert');
alert.header = 'Alert';
alert.subHeader = 'Subtitle';
alert.message = 'Account Not Found';
alert.buttons = ['OK'];
document.body.appendChild(alert);
return alert.present();
}