ReactJs :如何将数据从控制台打印到网页？
在成功执行POST和GET查询之后，我的操作结果将在React Dev工具的控制台中可见。我应该如何处理这些结果，最好是创建一个表并在我web应用程序本身上呈现该表？
下面是GET请求：
axios.get('http://localhost:5000/result')
.then((response) => {
console.log(response);
});
}控制台上显示的结果格式如下：
假设我想要通过遍历带有头、_id和Name的结果来创建表。我知道我应该使用地图功能。但是在我的代码中，我到底应该在哪里以及如何做到这一点呢？
回答 4
Stack Overflow用户
发布于 2020-06-24 10:42:10
你有几个选择。您可以在componentDidMount中进行调用，将结果设置为一个状态，然后呈现该状态。
componentDidMount() {
axios.get('http://localhost:5000/result')
.then((response) => {
this.setState({
data: response // maninpulate your response here
})
});
}
}
render() {
const { data } = this.state;
return this.renderTable(data) // this should return a table
}Stack Overflow用户
发布于 2020-06-24 10:43:53
假设你知道react钩子中“useState”的概念。如果没有，请理解一下。
长话短说，useState用于将数据存储在变量中。
const [data, setData] = useState();您可以将响应设置为变量，即setData(response);，而不是console.log(response);
在html中，
<table>
//some headers, if needed
//This will iterate your array of objects
{data.map((eachData) => (
<tr> <td>{eachData.id}</td>
<td>{eachData.name}</td>
....
</tr>
)
</table>请注意:超文本标记语言部分适用于基于类和基于函数的React组件，其中'useState‘是React挂钩功能的一部分，仅适用于基于函数的组件。
Stack Overflow用户
发布于 2020-06-24 11:57:45
我已经创建了一个小sample app，其中我使用react-table将数据显示为表。同样在这个例子中，我添加了promise来模拟服务器从服务器获取数据。这可以替换为实际的服务器调用，如axis.get等。
React-table提供了很多可能会有帮助的特性。例如，您可以提供您希望在数据的所有列中显示哪个columns。
如果您不希望使用任何库来显示表，也可以使用您的定制表实现替换ReactTable。
希望这能有所帮助。
https://stackoverflow.com/questions/62546643
复制相似问题
腾讯云开发者
