UseState - 無效的掛鈎調用。 Hooks 只能在函數組件內部調用

Question

• 我正在使用 useState 來更新來自 API 的響應。

• 然后我正在獲取我需要的數據，並將它們映射到一個新數組中（arr）

• 在上述步驟之后，我正在更新“setData”useState 掛鈎以使用“數據”狀態

• 但它給了我錯誤“無效的鈎子調用。只能在函數組件的主體內調用鈎子”

這是我面臨問題的代碼部分

import {useEffect, useState} from 'react'
import logo from './logo.svg';
import './App.css';
import axios from 'axios'
import ReactSearchBox from 'react-search-box'
import { set } from 'express/lib/application';

function App() {

 
  let [data, setData] = useState()
  
  useEffect(onMount,[])

  function onMount(){
      
      axios.get('https://restcountries.com/v3.1/all').then(res=>{
        
        let arr = res.data.map((c)=>{
          return {key:c.name.common, value: c.name.common}
        })
        setData(arr)   
      })

     
  }

我的整頁代碼

import "./styles.css";
import axios from 'axios'
import ReactSearchBox from 'react-search-box'
import {useEffect, useState} from 'react'

export default function App() {

  let [data, setData] = useState()
  
  useEffect(onMount,[])

  function onMount(){
      
      axios.get('https://restcountries.com/v3.1/all').then(res=>{
        
        let arr = res.data.map((c)=>{
          return {key:c.name.common, value: c.name.common}
        })
        setData(arr)
      })

     
  }
  return (
    <div className="App">
      <h1>Countries</h1>
      {data.length>0 ? <ReactSearchBox
        placeholder="Placeholder"
        value="Doe"
        data={data}
        callback={(record) => console.log(record)}
      />: null}
    </div>
  );
}

錯誤圖片

Answer 1

您使用的react-search-box 使用 React 17 。 這與 React 18 不兼容。因此，一旦填充了data狀態並調用了<ReactSearchBox ，就會引發錯誤。

您的代碼本身很好 - 問題在於依賴關系。

任何一個：

• fork react-search-box 並升級它以使其與 React 18 兼容，並改用該版本
• 將你的 React 版本降級到 React 17
• 想出你自己的搜索框來消除對 react-search-box 的依賴
• 等待 react-search-box 的維護者更新到 React 18