如何映射表行中的数据？

Question

我从get方法中获取通道1、2、3、4，然后调用post数据，在其中我调用函数参数并检查post方法的body参数中的get方法数据并打印post方法的数据，但它是在控制台中以对象的形式，我想存储在 temp 中并在网页中显示。

代码*

import React, { useEffect, useState } from "react";
import "./main.css"
import { AiOutlineCheck, AiOutlineClose, AiOutlineArrowUp, AiOutlineArrowDown } from "react-icons/ai";
import axios from "axios";


const Header = () => {
  const [setdata, fetchdata] = useState([]);
  const [setpostData, Postdata] = useState([]);



  useEffect(() => {
    getfetchData();
  }, [])

  useEffect(() => {
    setdata.forEach(function (val) {
      getPostData(val.Player, val.IP, val.Port, val.ChannelName);
      // setInterval(() => {
      //   getPostData(val.Player, val.IP, val.Port, val.ChannelName);
      // }, 500);
    });
  }, [setdata]);

  function getfetchData() {
    axios.get("http://localhost:9763/api/getPlayers",
      {
        headers: {
          "accepts": "application/json",
          'Access-Control-Allow-Origin': '*',
        },
        auth: {
          username: 'admin',
          password: 'password'
        },

      }).then(response => {
        //console.log(response.data)
        //console.log([...Object.values(response.data).flat()]);
        fetchdata([...Object.values(response.data).flat()]);
      }).catch(error => {
        console.log(error);
      });
  }


  var temp = [];
  // Post Data   

  function getPostData(Player, IP, Port, channelName) {
    var data = {
      PlayerName: Player,
      ChannelName: channelName,
      Port: Port,
      IpAddress: IP
    }
    axios({
      method: 'post',
      url: 'http://localhost:9763/api/getPlayerStatus',
      data,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      auth: {
        username: 'admin',
        password: 'password'
      }
    }).then(response => {
     
    }).catch(error => {
      console.log("Error In Post Data", error);
    });
  }
 // console.log("set", setpostData);


  return (

    <div className="container-fluid pt-2">
      <table className=" table-borderless text-center" id="refresh">
        <thead>
          <tr className="title" >
            {
              Object.values(setdata).map((val) => {
                return (
                  <th key={val.Player} > <AiOutlineCheck style={{ color: 'black', backgroundColor: "#41fc00", borderRadius: "25px" }} />
                    {val.ChannelName} </th>
                )
              })
            }
          </tr>
        </thead>
        <tbody>
          <tr >
            {
              setpostData.map((val, index) => {
                //  console.log("Inside Map", val);
                return (
                  <td key={index}>{val.Properties.Upcounter} </td>
                )
              })
            }
          </tr>
          <tr>
            {
              setpostData.map((val, index) => {
                //  console.log("Inside Map", val);
                return (
                  <td key={index}>{val.Properties.DownCounter} </td>
                )
              })
            }

          </tr>
        </tbody>
      </table>
    
    </div >

  );
}
export default Header;

控制台 Response.data 显示对象

如何将这 4 个对象放在一个数组中，以便轻松地在行中映射

      [
            {
                "Status": 1000,
                "Properties": {
                    "ClipName": "Clip1",
                    "Upcounter": "15:33:44:33",
                    "DownCounter": "16:33:44:33",
                    "ChannelName": "Channel1",
                    "StartTimeCode": "00:00:00:00",
                    "PlayerName": "Vtr1",
                    "Duration": "12:00:00:01"
                }
            }
        ]
        [
            {
                "Status": 1000,
                "Properties": {
                    "ClipName": "Clip3",
                    "Upcounter": "12:33:44:33",
                    "DownCounter": "12:33:44:33",
                    "ChannelName": "Channel3",
                    "StartTimeCode": "00:00:00:00",
                    "PlayerName": "Vtr3",
                    "Duration": "12:00:00:01"
                }
            }
        ]
[
            {
                "Status": 1000,
                "Properties": {
                    "ClipName": "Clip1",
                    "Upcounter": "15:33:44:33",
                    "DownCounter": "16:33:44:33",
                    "ChannelName": "Channel1",
                    "StartTimeCode": "00:00:00:00",
                    "PlayerName": "Vtr1",
                    "Duration": "12:00:00:01"
                }
            }
        ]
[
            {
                "Status": 1000,
                "Properties": {
                    "ClipName": "Clip1",
                    "Upcounter": "15:33:44:33",
                    "DownCounter": "16:33:44:33",
                    "ChannelName": "Channel1",
                    "StartTimeCode": "00:00:00:00",
                    "PlayerName": "Vtr1",
                    "Duration": "12:00:00:01"
                }
            }
        ]

Answer 1

你必须在<tr> 之前映射值我认为它的工作。你能发布表格的输出用户界面吗

对于合并数组对象，您可以这样做。我认为它的工作

var newArray = [...arr1, ...arr2, ...aar3,...arr4];