我成功地从页面加载时的 axios 调用返回数据。
constructor(props) {
super(props);
this.state = {
myData: []
}
}
componentDidMount() {
let context= this;
axios.get('http://localhost:3000/returntestvalues',{
})
.then((res) => {
console.log("Res os: ", res.data)
context.setState({
myData: res.data
});
})
console.log("res.data", this.state.myData)
}
正如您所看到的，我将 State 设置为返回的数据。现在，我想将其输出到表格中:
render() {
return (
<body onload="renderData()">
<table id="customers">
<tr>
<th>Name</th>
<th>Email</th>
<th>Message</th>
</tr>
<tr>
{this.state.myData?.length > 0
? this.state.myData.map((data, index) => (
<tr key={index}>
<td>{data.name}</td>
<td>{data.email}</td>
<td>{data.message}</td>
</tr>
))
: "No Data Found"}
</tr>
</table>
</body>
);
}
}
但是，我不知道如何通过 React 来做到这一点，我只通过 ejs 完成过。有人可以帮忙吗？
最佳答案
render() {
return (
<body onload="renderData()">
<table id="customers">
<tr>
<th>Name</th>
<th>Email</th>
<th>Message</th>
</tr>
<tr>
{this.state.myData?.length > 0
? this.state.myData.map((data, index) => (
<React.Fragment key={index}>
<td>{data.name}</td>
<td>{data.email}</td>
<td>{data.message}</td>
</React.Fragment>
))
: "No Data Found"}
</tr>
</table>
</body>
);
}
}
这里我假设键是姓名、电子邮件和消息。你可以改变你的。
关于reactjs - 如何将axios返回的数据输出到屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68483819/