在第一次 API 调用后设置状态不起作用答案

【问题标题】：Setting state not working after the first API call in react在第一次 API 调用后设置状态不起作用
【发布时间】：2021-09-24 08:07:59
【问题描述】：

我正在使用 axios 向端点发送一个 POST 请求，如果我返回的响应成功，我正在设置一些状态。

这是我的代码：

axios.post('/some/endpoint', {mydata})
      .then(res => {
          console.log(res.data);
          if(res.data.success)
          {
            setMsg('successful');
            setActive('alert alert-success fade-out');      
          }
          else
          {
            setMsg('Oops! An error occured!');
            setActive('alert alert-danger');
          }
    })

第一次API请求后，一切正常，我收到消息并淡出，虽然如果我尝试发送另一个请求，它不会再次出现并开始淡出，为什么setMsg和setActive 调用触发了吗？

渲染图如下：

    return (
      <>
        <Modal open={open} onClose={onCloseModal} center closeIcon={closeIcon} modalId="response-modal">
          <div className="qr-modal-header-stock">
            <h5>Enter fulfillment stock</h5>
            <p>{title}</p>
            <p>Fulfilment Center: {fulfilmentCenterName}</p>
            <p>Existing stock: {stock}</p>
            <p className={active} style={{opacity:0}}>{msg}</p>    <-- this appears firstly but not the second time when I submit the form, why?
            <form onSubmit={handleSubmit}>
                <input type="hidden" name="ean" value={data} />
                <input type="hidden" name="product_stock" value={newStock} />
                <input type="number" class="form-control" onChange={e => setNewStock(parseInt(e.target.value) + parseInt(stock))}/> <br />
                <input type="submit" class="btn btn-primary form-control" id="submit-fulfilment-center" value="Save"/>
            </form>
            <br />
            <p>New stock: {isNaN(newStock) ? 0 : newStock}</p>
            <button className="btn btn-primary" onClick={onCloseModal}>Scan another ean</button>
          </div>
        </Modal>
      </ >
    );

【问题讨论】：

你有没有重置过类名？我认为这可能是一个CSS问题。您是否有可能淡出消息，然后再将其淡入（即它仍然存在，但您再也看不到它）？
没错，我从不将其淡入并且从不重置类名，但每次它应该“重新添加”类并因此再次开始淡出过程
它不会“重新添加”任何东西。如果类已经存在，它们将保留在那里并且不会再次为任何淡出设置动画。您需要先删除这些类，然后才能“重新添加”它们并“重新淡入”。
是的，我已经测试过了，谢谢
我通过 addig onAnimationEnd={() => {setActive("")}} 让它工作

标签： javascript reactjs api asynchronous axios

【解决方案1】：

您应该使用“useState”钩子并观察“Msg”和“Active”状态的变化。

useState(()=>{
    // do somthing here 
},[Msg,Active])

每次“Msg”或“Active”的值发生变化时，都会重新渲染页面。

注意：不要设置状态并在同一个 useState 钩子中观察它们，这将导致无限渲染循环

【讨论】：