函数开始使用状态之前的 Spinner(CircularProgress)答案

【问题标题】：Spinner(CircularProgress) before function starts using state函数开始使用状态之前的 Spinner(CircularProgress)
【发布时间】：2021-08-27 10:03:18
【问题描述】：

我想做这样的东西。

onClick --> post_query() 开始 --> spinner() 显示 --> post_query() 结束 --> modal 显示

我遇到的问题是微调器在 post_query() 启动之前显示。我认为这是因为状态加载是真的（ const [loading, setLoading] = useState(true); ）

如何在 post_query() 启动后启动微调器？（我尝试使用 useEffect() 但无法使用 useEffect 处理）

function Header() {

  const [query, setQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  const [keys, setKeys] = useState([]);
  const [loading, setLoading] = useState(true);


  const modal_open = () => {
    setIsOpen(true);
  };

  const modal_close = () => {
    setIsOpen(false);
  };

  const post_query = (e) => {

      var result = new Map()
      axios.post('http://localhost:3000/api/' + query)
      .then(function(response){
        var content=JSON.parse(JSON.stringify(response)).data
        for (var i=0;i<content.data.length;i++){
          result.set(content.data[i].image_id, content.data[i].caption)
        }

        var key = Array.from(result.keys());
        setKeys(key);    

      }).catch(err => {
        console.log("error");
        alert(err);
      })
      .finally(() => setLoading(false)); 
    };
   


  return (
    <div className="header">
      <Link to="/">
        <img
          src="logo.png"
          className="header__logo"
        />
      </Link>
      <div className="header__search">
        <input className="header__searchInput" type="search" 
        onChange={
          (e) => {
            setQuery(e.target.value);
          }
        }/>
        <SearchIcon className="header__searchIcon" 
        onClick={(e)=> { post_query(); modal_open();}}/>
        
        {loading && <div><CircularProgress className="spinner"/></div>}
        
        {!loading && 
         <Modal 
            open={isOpen}
            onClose={modal_close} >
        
      <Fade in={isOpen}>
            <div className='modal_frame'>
              <img src={'img'+keys[0]+'.jpg'} className='modal_img' />
            </div>
       </Fade>
       </Modal>
      }
      </div>
    </div>
  );
}

export default Header;

【问题讨论】：

将初始加载状态设为 false 。并将此 setLoading(true) 移动到您的 post_query 函数中 axios 调用上方。

标签： javascript reactjs

【解决方案1】：

调用post_query时只需将setLoading添加为true，并将初始值更改为false

const [loading, setLoading] = useState(false);
const post_query = (e) => {
  var result = new Map()
  setLoading(true)
  axios.post('http://localhost:3000/api/' + query)
  ...
};

【讨论】：