如何使用axios从json获取数据? (反应)

时间:2020-03-17 07:44:04

标签: javascript json reactjs ecmascript-6 axios

我正在尝试获取此JSON数据

 {

    ID                string `json:"id"`
    Amount            int    `json:"amount"`
    Month             string `json:"month"`
    PayFailed         bool   `json:"pay_failed"`
}

然后我这样写代码。

但是我不认为这段代码可以获取数据。我做了console.log(),但是什么都没有。所以 我不知道如何检查以成功获取数据。

const Pay = props => {
  const { user, month,} = props;

  const classes = useStyles();

  const [Pay, setPay] = useState([]);

  useEffect(() => {

   axios
    .get(https://test)
    .then(res => {
      setPay(res.data);
    })
    .catch(err => {
      alert("error");
    });

  }, [user]);

  return (
    <Table className={classes.table}>
      <TableHead>
        <TableRow>
          <TableCell >date of pay</TableCell>
          <TableCell >amont</TableCell>
          <TableCell >pay</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {
          Pay.filter(pay => pay.month === month).map(pay => (
            pay.data.map((pay, index) => (
              <TableRow key={index}>
                <TableCell>{pay.DeletedAt}</TableCell>
                <TableCell>{pay.amount}</TableCell>
                <TableCell>{pay.pay_failed}</TableCell>
              </TableRow>
            )
          )))
        }
      </TableBody>
    </Table>
  );
};

export default PayDone;


有人知道如何获得吗?

1 个答案:

答案 0 :(得分:0)

能否请您分享更多细节?就像您遇到任何错误或最终数据是什么样一样,因为我们无权访问确切的API。在setPay(res.data);之前添加console.log,然后查看返回的内容。

尽管对您而言并不重要,但为什么要制作嵌套地图?在您的JSON模式中,没有对象字段。相反,它们都是原子值。

Pay.filter(pay => pay.month === month).map((pay, index) => (
          <TableRow key={index}>
            <TableCell>{pay.DeletedAt}</TableCell>
            <TableCell>{pay.amount}</TableCell>
            <TableCell>{pay.pay_failed}</TableCell>
          </TableRow>
        ))