React中如何让CircularProgress在post_query请求发起后才显示

核心修改步骤 #

• 首先修正loading初始状态：你判断的原因是对的，初始值设为true会导致组件一加载就显示Spinner，把初始值改为false即可避免该问题。
• 在请求启动时手动开启加载状态：在post_query函数第一行添加setLoading(true)，保证只有触发请求后才会显示Spinner。
• 优化Modal触发逻辑：原有代码点击时同时调用post_query和modal_open，会导致Modal打开状态提前标记，若请求失败会出现空内容Modal的问题，建议把modal_open()移到请求成功的回调中，只有请求拿到数据后才打开Modal。

完整修改后代码 #

function Header() {
  const [query, setQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  const [keys, setKeys] = useState([]);
  // 初始值改为false，避免首次渲染显示Spinner
  const [loading, setLoading] = useState(false);

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

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

  const post_query = (e) => {
    // 请求启动时再开启加载状态，显示Spinner
    setLoading(true);
    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);
      // 请求成功拿到数据后再打开Modal
      modal_open();
    }).catch(err => {
      console.log("error");
      alert(err);
      // 请求失败时重置Modal状态，避免展示空内容
      setIsOpen(false);
    })
    .finally(() => setLoading(false)); 
  };
   

  return (
    <div className="header">
      <Link to="/">
        <img
          src="logo.png"
          className="header__logo"
          alt="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(); }}/>
        
        {loading && <div><CircularProgress className="spinner"/></div>}
        
        {!loading && 
         <Modal 
            open={isOpen}
            onClose={modal_close} >
        
          <Fade in={isOpen}>
            <div className='modal_frame'>
              {/* 增加判断避免keys为空时报错 */}
              {keys.length > 0 && <img src={'img'+keys[0]+'.jpg'} className='modal_img' alt="查询结果" />}
            </div>
          </Fade>
       </Modal>
      }
      </div>
    </div>
  );
}

export default Header;

内容的提问来源于stack exchange，提问作者greenapple