Question

我是React的一个完整的初学者，我编写了一个fetch组件，该组件使用usefetch函数从API返回数据。在我的应用程序中，我可以手动更改输入以从API获取不同的数据，但是我想要的是具有一个输入字段和一个按钮，当单击该按钮时，它将从API返回新数据。在下面的代码中，当组件安装好并且如果我没有输入时，我只能获取一次数据。

import React , {useState ,useEffect} from 'react';
import useFetch from './fetch'; //fetch api  code imported 
import SearchIcon from '@material-ui/icons/Search';
import InputBase from '@material-ui/core/InputBase';
import Button from '@material-ui/core/Button';

  function City(){
    
    
    const searchStyle = {
      display:"flex",
      justifyContent:"flex-start",
      position:"absolute",
      top:"400px",
      left:"40%",
    } 

        

    
    const [inputVal , setInputVal]  = useState(''); //store input value 
    const [place,setPlace] = useState('london');  //get london data from api by manually changing value new data is succesfully dislayed 
    const {loading , pics}  = useFetch(place); //fetch data 
    const [images , setImages] = useState([]); //store fetched imgs 

    const removeImage = (id) =>{
      setImages((oldState)=>oldState.filter((item)=> item.id !== id))
    }


    useEffect(()=>{
      setImages(pics);
    } , [pics] ) 
    
    //load and display fetched images 
    return (<div className="city-info">
       
      {
        !loading ? 
        
          (images.length>0 && images.map((pic) =>{
            return  <div className="info" key = {pic.id}>
                     <span className="close" onClick= {()=>removeImage(pic.id)} >
                        <span
                          className="inner-x">
                          &times;
                        </span>
                      </span>
                      <img src = {pic.src.original} alt ="img"/> 
                      <div style = {{position:"absolute" ,margin:"10px"}}> 
                        <strong>From : </strong> 
                         {pic.photographer}  
                      </div>
                    </div>
          })
        
        ):<div> Loading   </div>

      }

        <div  style = {searchStyle} >
            <SearchIcon />
             //when input changes store it 
            <InputBase onChange={(e)=>setInputVal(e.target.value)}   placeholder="Enter input" style= {{backgroundColor:"lightgrey"}}/>
            //new fetch data based on input by clicking on button nothing happens onclick 
            <Button onClick= {()=>setPlace(inputVal)} color="primary" variant = "contained" > Find </Button>
        </div>  

    </div>);
  }

export default City;

fetch.js我的代码连接到api：

import { useState, useEffect } from 'react';

function useFetch(url){

  
  const [loading ,setLoading] = useState(false);
  const [query,setQuery] = useState(url);
  const [pics,setPics]  = useState([]);
  
  const getPics = async()=>{
    setLoading(true);
      const response = await fetch(
        `https://api.pexels.com/v1/search?query=${query}&per_page=4`,
        {
          method:"GET",
          headers:{
            Accept:"application/json",
            Authorization:key
          }
        }
      );
    const result = await response.json();
    setPics(result.photos ?? []);
    setLoading(false);
  }
  
  
  useEffect(()=>{
    getPics();
  },[query]);


  return {loading , pics ,query  ,setQuery , getPics};

}

export default useFetch;

我认为单击按钮时我的位置值会发生变化，但是我的提取功能没有重新加载，我只是更改了一个值。非常感谢您的帮助。

Answer 1

问题是useFetch正在存储传递到useState的初始URL：

const [query,setQuery] = useState(url);

place更新时，useFetch永远不会使用它，并且效果也永远不会重新触发。我认为，如果您从useFetch中完全删除此状态，则它应该可以按预期工作：

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [loading, setLoading] = useState(false);
  const [pics, setPics]  = useState([]);
  
  const getPics = async () => {
    setLoading(true);
    const response = await fetch(
      `https://api.pexels.com/v1/search?query=${query}&per_page=4`,
      {
        method: "GET",
        headers: {
          Accept: "application/json",
          Authorization: key
        }
      }
    );
    const result = await response.json();
    setPics(result.photos ?? []);
    setLoading(false);
  }
  
  
  useEffect(()=>{
    getPics();
  }, [url]);


  return { loading, pics, getPics };

}

export default useFetch;

Answer 2

您可以创建一个新的useEffect，然后将place添加到useEffect依赖项中，以产生一个副作用，以在place变量的值更改后再次调用该API：

  // return the read function as well so you can re-fech the data whenever you need it
  const {loading , pics, readData}  = useFetch(place);
  
  useEffect(() => {
    readData(place);
    setImages(pics)
  }, [place]);

这将为您提供每次单击按钮的最新数据。

使用React钩子从API重新获取数据

2 个答案: