使用 console.log 時，我的 reactJs 代碼在控制台中打印了兩次值

Question

使我的第一個項目做出反應，但控制台打印了兩次。

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 工作過。 提前致謝！

Answer 1

這是由於組件的重新渲染造成的，React 多次渲染每個組件，在 useEffect 掛鈎中調用 console.log 並在 useEffect 依賴數組中傳遞 searchText 變量。

例子：

useEffect(() => {
console.log(searchText); ;
}, [searchText]); 

ps：使用前不要忘記從react中導入useEffect。