无法在 axios 中映射获取值

Question

代码

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);
 
    });
  }, [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 => {
      var tempObj;
      tempObj = [response.data];
    
      for (var i = 0; i <= tempObj.length; i++) {
        if (tempObj[i] !== undefined) {
          temp.push(tempObj[i]); 
        }
      }
      Postdata(temp);

    }).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;

无法映射表行，只有第一个提取数据在数据行中可见，我有 4 个数据在提取 Console Image 为什么 2 set In console 是 fetch？请帮助我，我想将获取数据存储在 temp 中，然后在 setInterval 的表行中显示 请提供代码 首先，我从 get 方法中获取通道 1、2、3、4，然后调用 post 数据，其中我调用函数参数并检查 post 方法的 body 参数中的 get 方法数据并打印 post 方法的数据，但它在控制台中的对象形式，我想存储在 temp 中，然后将其显示在网页中

Answer 1

看起来您可能需要先解析返回的值，然后再尝试对其进行映射。

返回值是 JSON，不是 JS。

JSON.parse(response.data)