javascript - 太多的重新渲染。React 限制了渲染的数量以防止无限循环 - 为什么?
问题描述
我正在尝试使用 Wikipedia API 将搜索结果分为几类。
这是我的Search
组件:
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} />
</>
);
}
有一种增量搜索可以解释 setTimeout。
这是我的List
组件:
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 返回一个承诺,然后一旦承诺解决,您更新您的状态,更新您的状态将重新-渲染你的组件。
推荐阅读
- c# - 属性“[ApiExplorerSettings(IgnoreApi = true)]”有什么作用?
- django - 将 django 设置传输到环境变量
- android - 如何将键盘与 webview_flutter / JavascriptChannels 与 flutter_webview_plugin 一起使用
- sql - Postgres - 基于 groupby 将列转换为行
- environment-variables - 如果环境变量存在,则安装 Wix MsiPackage
- swift - 带有 OpenCV 动态框架的 Swift 框架,未加载库
- json - 如何将很长的字符串保存到firebase firestore数据库中?
- rust - 在为 Serde 反序列化的数据实现 StreamingIterator 时与借用检查器作斗争
- docker - Blazor SSR - 使用 docker (https-portal) 路由到不同页面时出现浏览器错误
- oracle - 反映 Oracle 数据库需要哪些用户权限?