React Hook useEffect 缺少依赖项:'getNewPins'

IT技术 reactjs
2022-07-12 01:53:05

我有一个小项目,要从 Unsplash 获取图像,即使我检查了很多次,我的代码仍然有一个问题,我正在运行我的代码,但它总是给出这个错误,但我不明白。任何想法将不胜感激。

应用程序.js:

function App() {
    const [pins, setNewPins] = useState([])
    const getImages = (term) => {
        return unsplash.get ("https://api.unsplash.com/search" , {
            params: {
              query: term
            }
        });
    };
    const onSearchSubmit = (term) => {
        getImages(term).then((res) => {
            let results = res.data.results;
            let newPins = [
              ...results,
              ...pins
            ]
            newPins.sort(function(a,b) {
                return 0.5 - Math.random();
            });
            setNewPins(newPins);
        });
    };
    const getNewPins = () => {
        let promises = [];
        let pinData = [];
        let pins = ['Istanbul','cats','sky','lake','nature']
        pins.forEach((pinTerm) => {
            promises.push (
              getImages(pinTerm).then((res) => {
                  let results = res.data.results;
                  pinData = pinData.concat(results);

                  pinData.sort(function(a,b) {
                      return 0.5 - Math.random();
                  });
              });
            );
        });
        Promise.all(promises).then(()=> {
            setNewPins(pinData);
        });
};
useEffect(() => {
    getNewPins();
}, []);
return (
    <div className="app">
        <Header  onSubmit={onSearchSubmit}/>
            <Mainboard  pins={pins}/>
    </div>
)}
export default App;
1个回答

getNewPins每次渲染后,都会在您的应用程序中重新创建该方法,并且您在一个useEffect表示将其放置在[]数组中的内部使用它。如果你这样做,它稍后会说包裹getNewPins在里面useCallback以防止重新渲染。取而代之的是,您可以将整个函数放在您useEffect喜欢的内部(因为它是最初完成的一次性操作):-

function App() {
const [pins, setNewPins] = useState([])
const getImages = (term) => {
return unsplash.get ("https://api.unsplash.com/search" , {
params: {
  query: term
}});
};
const onSearchSubmit = (term) => {
 getImages(term).then((res) => {
 let results = res.data.results;
 let newPins = [
   ...results,
   ...pins,
 ]
 newPins.sort(function(a,b){
  return 0.5 - Math.random();
 });
 setNewPins(newPins);
});
};

  useEffect(() => {
   const getNewPins = () => {
 let promises = [];
 let pinData = [];
  let pins = ['Istanbul','cats','sky','lake','nature']
  pins.forEach((pinTerm) => {
  promises.push (
  getImages(pinTerm).then((res) => {
  let results = res.data.results;
  pinData = pinData.concat(results);

  pinData.sort(function(a,b){
    return 0.5 - Math.random();
  });
 })
 );
});
Promise.all(promises).then(()=> {
 setNewPins(pinData);
 });
 };
  getNewPins();
 }, []);
return (
<div className="app">
  <Header  onSubmit={onSearchSubmit}/>
  <Mainboard  pins={pins}/>
</div>
);
}
export default App;