另一个带有 axios 的无限 useEffect() 循环

Question

学习钩子和许多钩子，我在使用 useEffect(( 时陷入了无限循环。已经尝试了这里给出的所有答案，在SO上，但未能实现它们。

我想知道更多，因为我以前的应用程序正在运行。将把代码放到他们两个。也许有人可以帮助我解决我的问题。

如果这些应用程序对某人来说看起来很熟悉，那么是的，它们来自 udemy 课程，但它们在这里使用 setState 和类制作。

---

编辑：

从中删除了对象 {}

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

我在寻找答案时添加了它。

---

无限循环应用：

代码三盒链接

应用.js

import React, { useState, useEffect } from 'react';
import SearchBar from "./SearchBar";
import youtube from "../apis/youtube";
import VideoList from "./VideoList";
const App = () => {
const [videos, setVideos] = useState([]);
const onTermSubmit = async (textInput) => {
const response = await youtube.get("/search", {
params: { q: textInput }
});
setVideos(response.data.items);
}
useEffect(() => {
onTermSubmit();
}, [])
return (
<div className="ui container">
<SearchBar onFromAppSubmit={onTermSubmit} />
<VideoList foundVideos={ videos } />
</div>
);
}
export default App;

搜索栏.js

import React, { useState } from "react";
const SearchBar = ({onFromAppSubmit}) => {
const [textInput, setTextInput] = useState("");
const onTextInputChange = event => {
setTextInput(event.target.value);
}
const onFormSubmit = event => {
event.preventDefault();
onFromAppSubmit(textInput);
}
return(
<div className="search-bar ui segment">
<form onSubmit={onFormSubmit} className="ui form">
<div className="field">
<label>Video Search</label>
<input
type="text"
placeholder="Type in to search for videos"
value={textInput}
onChange={onTextInputChange}
/>
</div>
</form>
</div>
);
}
export default SearchBar;

视频列表.js

import React from "react";
import VideoItem from "./VideoItem";
const VideoList = ({foundVideos}) => {
const renderedList = foundVideos.map((video) => {
return(
<VideoItem />
);
})
return(
<div>
{renderedList}
</div>
);
}
export default VideoList;

视频项目.js

import React from "react";
const VideoItem = () => {
return(
<div>
VideoItem
</div>
);
}
export default VideoItem;

优酷.js

import axios from "axios";
const KEY = "myVerySecretKey^^";
export default axios.create({
baseURL: "https://www.googleapis.com/youtube/v3",
params: {
part: "snippet",
type: "video",
maxResults: 5,
key: KEY
}
});

---

和我的工作应用程序：

应用.js

import React, { useState, useEffect } from 'react';
import unsplash from "../api/Unsplash";
import SearchBar from "./SearchBar";
import ImageList from "./ImageList";

const App = () => {
const [images, setImages] = useState([]);
const onSearchSubmit = async (inputText) => {
const response = await unsplash.get("/search/photos", {
params: { query: inputText},
});
setImages(response.data.results);
}
useEffect(() => {
onSearchSubmit();
}, [])
return (
<div className="ui container" style={{marinTop: "10px"}}>
<SearchBar whenSubmitted={onSearchSubmit} />
<ImageList foundImages={images}/>
</div>
);
}
export default App;

搜索栏.js

import React, { useState } from "react";
function SearchBar({whenSubmitted}){
const [inputText, setInputText] = useState("");
function onInputChange(event){
const writtenText = event.target.value;
setInputText(writtenText);
}
function onFormSubmit(event){
event.preventDefault();         //to prevent the form to refresh the whole form
whenSubmitted(inputText);
}
return (
<div className="ui segment">
<form onSubmit={onFormSubmit} className="ui form">
<div className="field">
<label>Image Search</label>
<input
type="text"
value={inputText}
onChange={onInputChange}
placeholder="Search"
/>
</div>
</form>
</div>
);
}
export default SearchBar;

Answer 1

代码看起来正确，但我不确定为什么你从useEffectapp.js传递空对象。 这里：-

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

您的函数可能需要一个字符串。

Answer 2

请在搜索栏中更改您的代码.js如下所示

onChange={(evt) => onInputChange(evt)}

希望这对你有帮助。

Answer 3

你应该让你的useEffect依赖于你的searchValue，以便每次提交新searchValue时都会触发搜索：

import React, { useState, useEffect } from "react";
import SearchBar from "./SearchBar";
// import youtube from "../apis/youtube";
import VideoList from "./VideoList";
const App = () => {
const [videos, setVideos] = useState([]);
const [searchValue, setSearchValue] = useState("");

useEffect(() => {
(async () => {
// const response = await youtube.get("/search", {
//   params: { q: textInput }
// });
setVideos([searchValue, "some", "random", "items"]); //mocked the axios connection
})();
}, [searchValue]);
return (
<div className="ui container">
<SearchBar
onFromAppSubmit={newSearchValue => setSearchValue(newSearchValue)}
/>
<VideoList foundVideos={videos} />
</div>
);
};
export default App;

您可以查看更新的沙盒。

Answer 4

好吧，事实证明，要获得我想要的结果(仅在我在搜索栏中写了一些东西并按 Enter/Return 后显示结果(，我只需要擦除 useEffect(( 函数：

作者：Bobby B. (助教(

useEffect 在每个渲染上被调用，因此，当应用程序首次加载其 在没有搜索词的情况下被调用(抛出 400(。这 最简单的解决方案是提供一个默认的搜索词：

useEffect(() => {
onSearchSubmit('cats');
}, []);

或者，如果您不查找.js则可以将其从应用程序中完全删除 用于此初始默认图像搜索功能。

我从来没有想过，人们可以跳过useEffect((。我确信，它在钩子中用作组件DidMount((的某种替代品。

谢谢大家的帮助！