我正在尝试使用 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
所以我不明白为什么会有任何问题。
感谢任何帮助 - 提前致谢!