Javascript 使用 console.log 时，我的 reactJs 代码在控制台中打印了两次值

在react中制作我的第一个项目，但控制台打印了两次.

import axios from 'axios';
export default function App() {


  const [searchText ,setSearchText]=useState("");
  console.log(searchText); 


  //api key

  function searchForOrder(){
    //set up correct api call
    var APICall= `http://lookup-app.teflon.order-services.com/orders-lookup/services/v4/orders?orderNo=${searchText}`;
    console.log(APICall)
    //handle api call
    axios.get(APICall)
      .then(function (response) {
        //success  
        console.log(JSON.parse(response.data));
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  return (
    <div className='template'>
      <div className='search'>
          <div className='form-control'>
            <label htmlFor='number'>Search your order Number</label>
            <input
              type='name'
              name='OrderNo'
              id='OrderNo'
              value={searchText}
              onChange={e => setSearchText(e.target.value)}
            />
            <button onClick={searchForOrder} className='submit'>search</button>
          </div>
      </div>
    </div>
  )
}

我的控制台如下所示:

谁能告诉我哪里出了问题，因为我以前没有在reactJs工作过.