在React中保存API搜索结果的信息,可以使用React的状态管理来保存数据。
首先,你需要创建一个React组件,用于进行API搜索并保存结果。在该组件的构造函数中,定义一个状态变量来保存搜索结果。然后,在组件的生命周期方法中,发起API请求并将结果保存到状态变量中。
以下是一个示例代码:
import React, { Component } from 'react';
class APISearch extends Component {
constructor(props) {
super(props);
this.state = {
searchResults: null
};
}
componentDidMount() {
// 在组件挂载后,执行API搜索并保存结果
this.searchAPI();
}
searchAPI = async () => {
try {
const response = await fetch('API的URL');
const data = await response.json();
this.setState({ searchResults: data });
} catch (error) {
console.error(error);
}
}
render() {
const { searchResults } = this.state;
return (
{searchResults ? (
{searchResults.map(result => (
- {result.name}
))}
) : (
Loading...
)}
);
}
}
export default APISearch;
在上面的示例中,searchResults
是保存搜索结果的状态变量。在 componentDidMount
生命周期方法中,我们调用 searchAPI
方法来执行API搜索,并将结果保存到 searchResults
状态变量中。在 render
方法中,我们根据 searchResults
的值来渲染搜索结果或显示加载状态。请根据你的实际需求进行修改。