reactjs useEffect不触发搜索

xpcnnkqh 于 2023-01-02 发布在 React

关注(0)|答案(3)|浏览(131)

我有一个应用程序，用户在其中输入给定年份，然后应用程序向API发出axios. get请求，以获取在该给定年份发布的电影列表
由于某种原因，useEffect钩子根本不工作，我不知道在哪里查找错误：
下面是代码：

import React, {useState, useEffect }  from "react";
import "./index.css";
import axios from 'axios'

function MovieList() {

  const [keywords, setKeywords] = useState(0)
  const [fetchedData, setFetchedData] = useState('')

  console.log(keywords)

  
console.log(fetchedData)
  const fetchData = () => {
    const { data } = axios.get(
      `https://jsonmock.hackerrank.com/api/moviesdata?Year=${keywords}`
    )
    setFetchedData(data)
  }

  useEffect(() => {
    fetchData()
  }, [])

  const onSubmit = (e) => {
e.preventDefault()
fetchedData()
}
  
  return (
    <div className="layout-column align-items-center mt-50">
      <section className="layout-row align-items-center justify-content-center">
        <input type="number" value={keywords} className="large" onChange={e => setKeywords(e.target.value)} placeholder="Enter Year eg 2015" data-testid="app-input"/>
        <button className="" onSubmit={onSubmit} data-testid="submit-button">Search</button>
      </section>

      <ul className="mt-50 styled" data-testid="movieList">
        <li className="slide-up-fade-in py-10">{data.title}</li>
      </ul>

      <div className="mt-50 slide-up-fade-in" data-testid="no-result"></div>
    </div>
  );
}

export default MovieList

reactjs

来源：https://stackoverflow.com/questions/74952948/useeffect-not-firing-on-search

3条答案

按热度按时间

ia2d9nvy1#

如果只想在单击按钮时获取数据，则需要进行以下更改：

const fetchData = async() => {
 const {data} = await axios.get(
  `https://jsonmock.hackerrank.com/api/moviesdata?Year=${keywords}`
 )
 setFetchedData(data.data)
}

1.移除你的useEffect。

如果您希望在用户每次键入内容时获取数据，则

const fetchData = async() => {
 const {data} = await axios.get(
  `https://jsonmock.hackerrank.com/api/moviesdata?Year=${keywords}`
 )
 setFetchedData(data.data)
}

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

这是一个sandbox

赞(0）回复(0）举报 2023-01-02

fcy6dtqo2#

你可以使用一个异步函数来等待直到数据被加载。如下所示：

const fetchData = async()=>{
    const response = await axios.get(
      `https://jsonmock.hackerrank.com/api/moviesdata?Year=${keywords}`
    )
    setFetchedData(response.data)
  }

使用具有依赖关系的效果：

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

赞(0）回复(0）举报 2023-01-02

vohkndzv3#

在你的例子中，useEffect钩子只会在组件加载时运行一次，如果你想让它在每次关键字改变时运行，你需要像这样把它传递到dependencies数组中：

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

也正如@Sachila所说，您需要使用异步等待。

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs useEffect不触发搜索

3条答案

相关问题

热门标签

最新问答