总的来说,我对React/axios/js还是个新手,所以如果这是一个有点愚蠢的问题,我表示歉意,
我正在从一个springboot API中获取多个具有多个属性的对象,以便使用axios获取数据,从而实现简单的表格显示。我的问题是,我只能一次获取具有所有属性的整个对象,我希望在通过axios Get请求获取对象后,将每个属性从对象中分离出来,然后将其导出到我的表格模块中。这样我就可以在相应的表字段(姓名、年龄等)上正确地显示每个字段。
我可以使用基于类的方法,构造函数和setStates来使它工作,但我需要使用钩子和作为React的功能组件来完成它。
Axios请求模块
import axios from "axios";
const API_ADRESS = "http://localhost:8080/api/users";
const userDatax = axios.get(API_ADRESS).then((res) => {
return { nome: res.data[0] };
});
console.log(userDatax);
export default userDatax;
现在是React模块,我需要将对象属性显示为表显示的单个元素
import React, { useState, useEffect } from "react";
import userDatax from "../services/UserService";
import "./card.css";
const TabelaUsuarios = (props) => {
const [usuario, setUsuario] = useState();
console.log(userDatax);
console.log(
userDatax.then((res) => {
console.log(res);
})
);
let DATARUX = userDatax.then((res) => {
return res;
});
console.log(DATARUX);
function callUseState() {
setUsuario(DATARUX);
}
return (
<div className="card">
<h1 className="text-center">USUARIOS CADASTRADOS</h1>
<div>
<table className="table table-striped">
<thead>
<tr>
<td>ID </td>
<td>NOME </td>
<td>SOBRENOME </td>
<td>EMAIL</td>
<button onClick={callUseState}>change user</button>
</tr>
</thead>
<tbody>
<td></td>
{
<tr>
<td>{usuario}</td>
<td>{usuario}</td>
<td>{usuario}</td>
<td>{usuario}</td>
</tr>
}
</tbody>
</table>
</div>
</div>
);
};
export default TabelaUsuarios;
这里是我从java springboot API中获取的对象,以供参考
如果RepositorioUsuarios.savergrwaterspf@gmail.comRepositorioUsuarios.save新sledgehammer@gmail.comRepositorioUsuarios.save用户gmail.comRepositorioUsuarios.save,请使用以下代码 www.example.com ”));
感谢提前的任何指导,我是一个很新的编码,我正在努力提高自己尽快我可以,我将感谢任何提示或方法对这个特定的问题,干杯大家!
我尝试过在对象上使用Map方法来Map所有元素,但没有成功,我还尝试过解构对象,一旦我使用axios get请求获取数据,但即使我为获取结果设置了一个变量,我也无法将该变量作为普通对象或数组使用,它始终是一个axios promise包,我已经尝试查看axios文档,了解如何更好地处理请求,但仍然没有成功,我希望找到一个解决方案,了解如何处理数据请求并访问对象的各个元素和属性。
1条答案
按热度按时间ryevplcw1#
您可以通过以下方式访问响应字段:
看起来就像这样