在 React 中显示来自 API 的对象数组

Question

I'm trying to display an array of information on my page but I'm stuck on how I should do it.

I believe that the problem is in how I'm trying to render it but I have already done so many tries that I run out of ideas.

In the console, I´m having success on the request and I receive the array, but I can't figure out how to display it.

import React, { useState } from 'react';
import { useNavigate } from "react-router-dom";
import axios from "axios";

const MyLocations = () => {
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  console.log(endDate);
  console.log(startDate);
  const tokenAtual = sessionStorage.getItem("token");
  const [getLocations, setLocations] = useState([]);



  const handleList = () => {
    
    var axios = require("axios");
    var data = '{\r\n  "end": "2022-07-01",\r\n  "start": "2022-01-01"\r\n}';

    var config = {
      method: "post",
      url: "https://api.secureme.pt/api/v1/position/history",
      headers: {
        Authorization:
          tokenAtual,
        "Content-Type": "text/plain",
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
          console.log(response.data);
          setLocations(response.data);
          return
            <div>
              <h1>getLocations.map(response.data.location.latitide)</h1>
              <h1>getLocations.map(response.data.location.longitude)</h1>
            </div>
        
  })
      .catch(function (error) {
        console.log(error);
      });


  }

    return (
        <div>
          <title>My Locations</title>

          <input
          type="button"
          className="btn-pastLocals"
          onClick={handleList}
          value={"See Past Locations"}
        />
          <input
            type="date"
            className="start-date"
            placeholder="Start Date"
            value={startDate}
            onChange={(e) => setStartDate(e.target.value)}/>

          <input
            type="date"
            className="end-date"
            placeholder="End Date"
            value={endDate}
            onChange={(e) => setEndDate(e.target.value)}/>
          
        </div>
      );
}

export default MyLocations;

Can anyone please help me? Thank you..!!

Answer 1

This might work if the the locations array has this structure

import React, { useState } from 'react';
import { useNavigate } from "react-router-dom";
import axios from "axios";

const MyLocations = () => {
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  console.log(endDate);
  console.log(startDate);
  const tokenAtual = sessionStorage.getItem("token");
  const [getLocations, setLocations] = useState([]);



  const handleList = () => {
    
    var axios = require("axios");
    var data = '{\r\n  "end": "2022-07-01",\r\n  "start": "2022-01-01"\r\n}';

    var config = {
      method: "post",
      url: "https://api.secureme.pt/api/v1/position/history",
      headers: {
        Authorization:
          tokenAtual,
        "Content-Type": "text/plain",
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
          console.log(response.data);
          setLocations(response.data);
  })
      .catch(function (error) {
        console.log(error);
      });


  }

    return (
        <div>
          <title>My Locations</title>
          {locations.map((location) => {
             return (
             <>
              <h1>
                {location.data.location.latitude}
              </h1>
              <h1>
                {location.data.location.latitude}
              </h1>
             </>
             )
          })}
          <input
          type="button"
          className="btn-pastLocals"
          onClick={handleList}
          value={"See Past Locations"}
        />
          <input
            type="date"
            className="start-date"
            placeholder="Start Date"
            value={startDate}
            onChange={(e) => setStartDate(e.target.value)}/>

          <input
            type="date"
            className="end-date"
            placeholder="End Date"
            value={endDate}
            onChange={(e) => setEndDate(e.target.value)}/>
          
        </div>
      );
}

export default MyLocations;

Answer 2

First of all, you need to study the react documentation and learn how it works.

Secondly, here is a possible solution to your problem:

return (
  <div>
    <title>My Locations</title>

    {
      getLocations.map(
        location => (
          <div>
            <h1>
              {location.data.location.latitude}
            </h1>
            <h1>
              {location.data.location.latitude}
            </h1>
          </div>
        )
      )
    }

etc...