如何从axios Get请求返回对象的特定属性作为功能组件

h22fl7wq  于 2022-11-23  发布在  iOS
关注(0)|答案(1)|浏览(93)

总的来说,我对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文档,了解如何更好地处理请求,但仍然没有成功,我希望找到一个解决方案,了解如何处理数据请求并访问对象的各个元素和属性。

ryevplcw

ryevplcw1#

您可以通过以下方式访问响应字段:

usuario.fieldName

看起来就像这样

{
     <tr>
        <td>{usuario.fieldOne}</td>
        <td>{usuario.fieldTwo}</td>
        <td>{usuario.fieldThree}</td>
        <td>{usuario.fieldFour}</td>
    </tr>
}

相关问题