Javascript 太多的重新渲染。React限制渲染数量以防止无限循环-为什么?
我正在尝试使用WikipediaAPI将搜索结果分类 这是我的Javascript 太多的重新渲染。React限制渲染数量以防止无限循环-为什么?,javascript,reactjs,state,wikipedia-api,Javascript,Reactjs,State,Wikipedia Api,我正在尝试使用WikipediaAPI将搜索结果分类 这是我的搜索组件: function Search() { const [value, setValue] = useState(""); const [results, setResults] = useState([]); useEffect(() => { let timerId = null; if (value) { time
搜索组件:
function Search() {
const [value, setValue] = useState("");
const [results, setResults] = useState([]);
useEffect(() => {
let timerId = null;
if (value) {
timerId = setTimeout(async () => {
const { data } = await axios.get(
"https://en.wikipedia.org/w/api.php",
{
params: {
action: "query",
list: "search",
origin: "*",
format: "json",
srsearch: value,
},
}
);
console.log(data);
setResults(data.query.search);
}, 400 );
}
return () => {
clearTimeout(timerId);
};
}, [value]);
return (
<>
<form className="ui form">
<input
type="text"
placeholder="Search Wikipedia..."
value={value}
onChange={(e) => setValue(e.target.value)}
></input>
</form>
<List results={results} />
</>
);
}
const List = ({ results }) => {
const [category, setCategory] = useState("");
const renderedList = results.map((item) => {
if (item.snippet.includes("film") || item.snippet.includes("movie")) {
console.log("movie", item);
}
if (
item.snippet.includes("band") ||
item.snippet.includes("musician")
) {
setCategory("music");
}
return (
<div className="ui segment">
<h2>
<a
href={"https://en.wikipedia.org?curid=" + item.pageid}
className="header"
target="_blank"
rel="noopener noreferrer"
>
{item.title}
</a>
</h2>
<p dangerouslySetInnerHTML={{ __html: item.snippet }}></p>
<p>{category}</p>
</div>
);
});
我尝试将超时设置得更高,以便在键入完整搜索词之前不会有任何活动的重新渲染,但这会得到相同的结果。API也只返回10个结果的数组,因此它不会处理大量数据
App.js
实际上只包含List
,所以我不明白为什么会有任何问题
感谢您的帮助-提前感谢 正如我们在评论中讨论的,您提到您是React的初学者,没有必要使用设置的超时调用axios,因为axios会返回一个承诺,一旦承诺得到解决,您就可以更新您的状态,更新您的状态将重新呈现组件。不介意我问一下,为什么您要从setTimeout调用API?不确定您是出于某种实践原因还是不了解useEffect的用途,但基本上在useEffect中,您应该只调用api,比如axios.get(..).then(response=>setResults(response.data))-而不需要在钩子体中使用async/await(尽管async/await很好)但是这个超时真的很尴尬。我不太明白使用效果,我正处于学习的早期阶段。我会研究一下你的建议。谢谢你的帮助!啊,好的,所以你肯定不需要那个超时-因为你的状态更改将重新呈现你的组件,并且你在axios调用完成后设置你的状态-所以你不需要“按程序”而是“按反应”思考。你完全正确地认为这个超时是不必要的,再次感谢你的帮助Ognjen。出于我的目的,我发现将结果推送到一个数组而不是在单个类别上设置state就足够了。不客气,我已经写了一个答案,以便将来可以帮助其他人。当心!