javascript - 如何使用映射渲染 Axios 函数的结果
问题描述
我正在尝试在 React 中显示 axios 函数的结果。映射已在函数中定义,但我只能通过控制台记录第一个“then”中定义的结果
我已经尝试了 componentDidMount() 并且只是在渲染返回中映射出来,但无法让它工作。我知道还有其他方法,例如将结果安装到状态并将状态映射到组件渲染中,但我试图直接从此 getReactResults() 函数获取结果。
const API_URL = 'https://api.testapi.com/?query=test';
const getReactResults = () => axios.get(API_URL)
.then((res) => res.data.items)
.then((mul) => mul.map(({name, url}) => ({
name,
url
})
)
);
class Rel extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount(){
let results = this.getReactResults();
console.log(results);
}
render(){
return(
<div>
<ul>
{results.map((item, i) => <li key={i.name}>{i.name </li>)}
</ul>
</div>
)
}
}
我收到未定义“结果”的错误,但结果应该显示来自 API 的结果。
解决方案
当 promise 解决后,您可以在组件状态中设置结果,并this.state.results
在您的渲染方法中使用。
const getReactResults = () =>
axios.get(API_URL).then(res =>
res.data.items.map(({ name, url }) => ({
name,
url
}))
);
class Rel extends React.Component {
state = { results: [] };
componentDidMount() {
getReactResults().then(results => {
this.setState({ results });
});
}
render() {
return (
<div>
<ul>
{this.state.results.map((item, i) => (
<li key={i}>{item.name}</li>
))}
</ul>
</div>
);
}
}
推荐阅读
- mongodb - 公开一个 Java Spring Boot 方法
- c# - SqlClient.SqlException:对象名称无效
- c++ - 为什么 CAF system.registry() 应该在 put(atom_value) 之后自动调用 erase(atom_value)
- javascript - 使用没有 sheet.js 或 spread.js 的 Javascript 从 xlsx 读取大数据
- cluster-analysis - 相同设置的 Weka 聚类结果不同
- hadoop - 如何在 Hadoop 2.7.6 上安装 Snappy?
- database - 我正在尝试在 sdf 文件中创建函数并出现错误:在错误函数中解析查询令牌时出错
- html - 为什么我的标题没有在纵向上一直穿过?
- macos - 如何随机选择 50 个文件并将它们复制到不同的文件夹/目录(MacOS)?
- crop - 如何根据不同尺寸的最大宽度和高度计算图像的比例因子