如何更改针对 axios 发布响应的 UseStatus？

Question

我今天又带着一件让我头疼的事情回来了。

所以我正在制作一个联系表单几乎完成了，除了我想包含的动画分三个步骤。

1- 提示用户联系 2-使用小型装载机使等待用户更友好 3-显示一切顺利并发送表单或出现问题

所以我的想法是使用三个不同的图标/加载器并将它们全部放在彼此的顶部，并根据需要使用 UseState 使它们可见或隐藏。

现在，我可以在单击提交按钮后立即隐藏第一个图标（从第一步开始），但我无法让加载程序出现或当 API 完成响应时最后一个图标

想知道我是否应该以其他方式访问它？

import styled from "styled-components";
import { RiMailSendFill,FcApproval } from 'react-icons/all';
import '../../Style/styleComponents/Style.css';
import {sendMessage} from '../../Actions/msgAction';
import { useDispatch, useSelector } from 'react-redux';
import { useForm } from "../../Hook/useForm";

const ContactForm = () => {
const dispatch = useDispatch();
const initFormValues =
{
  nombre : "nico ",
  email : "sasjaja@asdsa ",
  telefono : "asda ",
  empresa : "dasd",
  mensaje : "dasdas",
  date: "s"

}


const[formValues, handleInputChange, reset] = useForm(initFormValues);
const{nombre, email, telefono, empresa, mensaje} = formValues

//loader submit buttons
const[mail, setMail]= useState(true);
const[loading, setLoading]= useState(false);
const[approved, setApproved]= useState(false);
 

  const handleSendMsg = ( event ) =>
  {
    event.preventDefault();
    dispatch( sendMessage( formValues ) )
    .then( ( result ) => 
        {
            if( result )
            {   
              console.log(initFormValues);
                //closeModal();
                console.log('dat')
            };
            setLoading(true);        
        });
        reset();
  }

const showE =()=> {

  if (mail) {
    setMail(false)
    setLoading(true)
    console.log("pressed submit"); 
 }
}
const showL=()=>{
  if (loading) {
    setLoading(false)
    console.log("sending email ");
  }
}

  return (

      <Container>
        <Left>
          <h1>Tráenos tus desafíos</h1>
        </Left>
        <Right>
    <form onSubmit={ handleSendMsg }>
      <Label>
        <Linput> 
      <Name>
        <label htmlFor="name">Nombre:</label>
        <input type="text" id="name" required name="nombre" value={ nombre } onChange={ handleInputChange } />
      </Name>
      <Tel>
        <label htmlFor="name">Telefono:</label>
        <input type="text" id="phone" required name="telefono" value={ telefono } onChange={ handleInputChange }  />
      </Tel>
      <Company>
      <label htmlFor="company">Empresa:</label>
      <input type="text" id="company" name="empresa" value={ empresa} onChange={ handleInputChange }/>
      </Company>
      </Linput>
      <Rinput>
      <Email>
        <label htmlFor="email">E-mail:</label>
        <input type="email" id="email" required  name="email" value={ email } onChange={ handleInputChange }/>
      </Email>
      <Msg>
        <label htmlFor="message">Mensaje:</label>
        <textarea id="message" required name="mensaje" rows="8" cols="50" value={ mensaje } className="bigger" onChange={ handleInputChange }/>
      </Msg>
      </Rinput>
      </Label> 
      <Button>
      <Send>
      <button   type="Submit"  id ="submit" onClick={showE, showL}>Enviar</button>
      </Send>
      <Sent>
      <RiMailSendFill  id="mail" className={ mail ? 'svg': "svg active"}/>
      <Loader   className={ loading ? 'spin': "spin active"}>
      <div class="spin"></div>
      </Loader>
      {/* <FcApproval id= "approve" className={ approved ? 'approve': "approve active"}/> */}
      </Sent>
      </Button>
    </form>
    </Right>
    </Container>
  );

};

export default ContactForm;

谢谢，你们总是救我！

Answer 1

有一些方法可以让状态相互协作，最简单的方法就是这样。

---

1-useStates 为每个 您希望能够将状态切换到的元素。

const [mail, setMail] = useState(true);
const [approved, setApproved] = useState(false);
        

2 主要功能，具有较小的功能， 每一个都相应地改变。

function showL( ){
        
setMail(false);
if(!mail){
return setApproved(true);
}
}
        
//hide mailIcon / show approve
function showA( ){
            
setApproved(true);
if(approved){
return setMail(false);
}
}

添加一个事件监听器到特定的 用于触发更改的元素， 在这里你像这样传递两个函数。

<Button>
<Send>
<button type="Submit" id="submit" onClick={() => {showL(); showA();}}>
Enviar
</button>
</Send>

三元表达式如果为真，则渲染元素，假为空

<Sent>
<EMail>
{mail ? <RiMailSendFill/> : null}
</EMail>
<Loader>
{approved ? <FcApproval/>: null}
</Loader>
</Sent>
</Button>``` 

---