如何僅在選擇時從選擇值中獲取onChange？不使用useEfect有可能嗎？[復制]

這篇文章在8 小時前被編輯并提交審核。

所以我試圖根據我在選擇（流派）中的選項來獲取一些動漫資料，問題是只有在更改選項兩次后，我的選擇中的 onChange 才不會發生提取，我嘗試使用useEffect但問題是它立即獲取而不更改選擇值。

有人可以幫助解釋我做錯了什么嗎？

這是我在代碼沙箱上的代碼

index.js

function App() {
  const [list,setList]=useState([])
  const [genre,setGenre]=useState(0)


  const fetchData=()=>{
    const options = {
      method: 'GET',
      url: `https://jikan1.p.rapidapi.com/genre/anime/${genre}/1`,
      headers: {
        'x-rapidapi-host': 'jikan1.p.rapidapi.com',
        'x-rapidapi-key': '*******************************'
      }
    };
    
    axios.request(options).then(function (response) {
      console.log(response.data.anime);
      setList(response.data.anime)
    }).catch(function (error) {
      console.error(error);
    });
  }

    

  const handleChange=(e)=>{
    setGenre(e.target.value)
    fetchData()
    
  }
  
  return (
    <div className="mx-auto px-8 py-4 flex flex-col justify-center">

      <div>
      <h1>Design with Tailwind</h1>
      
      <select name="genre" className='p-2 bg-bg-prime'  id="genre"  onChange={handleChange}>
            <option value="1" >Action</option>
            <option value="2" >Adventure</option>
            <option value="4" >Comedy</option>
      </select>
      </div>
        <div>
          {list && (
            list.map((an)=>(
              <p key={an.title}>{an.title}</p>
            ))
          )}
        </div>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

uj5u.com熱心網友回復：

當你在fetchData之后打電話時setGenre，根據反應檔案：

狀態更新可能是異步的

所以基本上fetchData在狀態值實際更新之前呼叫（這導致您的請求使用舊值而不是請求的值執行）。修復將類似于：

...
useEffect(() => {
  fetchData();
}, [genre]) 

const handleChange=(e)=>{
  setGenre(e.target.value)
}

如果您真的想保持您的方法，您還可以執行以下操作：

const handleChange=(e)=>{
  setGenre(e.target.value)
  fetchData(e.target.value)
}

并在獲取資料中使用變數（所以

const fetchData = (selectedGenre) => {
  ...
    url: `https://jikan1.p.rapidapi.com/genre/anime/${selectedGenre}/1`,
  ...

我推薦第一種方法，但兩者都應該作業。

此外，如果您使用有效值作為流派的初始值以及第一種方法，您可以獲得默認填充的串列（對于您的示例const [genre,setGenre]=useState(1)）

uj5u.com熱心網友回復：

我在您的密碼箱中看不到任何內容。

我認為正確的方法是在嘗試時使用 useEffect，這樣可以確保在“fetchData”函式中使用的“流派”值是正確的。

現在，您唯一缺少的是防止“fetchData”函式在組件渲染后立即運行并使其僅在您第一次更改“流派”狀態后運行的狀態。

function App() {
  const [list,setList]=useState([])
  const [genre,setGenre]=useState(0)
  const [selectCount, setSelectCount]=useState(0)

  const fetchData=async()=>{
    const options = {
      method: 'GET',
      url: `https://jikan1.p.rapidapi.com/genre/anime/${genre}/1`,
      headers: {
        'x-rapidapi-host': 'jikan1.p.rapidapi.com',
        'x-rapidapi-key': '*******************************'
      }
    };
    
    axios.request(options).then(function (response) {
      console.log(response.data.anime);
      setList(response.data.anime)
    }).catch(function (error) {
      console.error(error);
    });
  }

  const handleChange=(e)=>{
    setSelectCount(selectCount   1)
    setGenre(e.target.value)
  }

  useEffect(() => {
    if (selectCount === 0) return
    fetchData()
  }, [genre])
  
  return ...Your JSX goes here...
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

標籤：javascript 反应 react-hooks axios

上一篇：configureStore有多個reduce時如何訪問商店？

下一篇：Reactjs警告：串列中的每個孩子都應該有一個唯一的“關鍵”道具