javascript - 对象的映射函数的 React JS 等价物是什么？（关闭）

问题描述

我是 React 新手，所以请耐心等待我提出我的问题。我正在尝试处理 API 调用，以便可以在 HTML 表上显示返回的 JSON 文件。到目前为止，我一直在使用 map 函数来正确地将键和值分配给表格单元格。

我几乎立即注意到的一件事，互联网搜索无法帮助我，只要 JSON 文件的返回数据在方括号内 .. [] ..， map 函数对我来说是有用和实用的可能导致它们成为桌子内的物品。见下文：

[
    {
        "id_1": 0,
        "id_2": 1,
        "id_3": 30,
        "id_4": 9,
        "id_5": 0,
        "id_6": "Marty",
        "id_7": "111-111-1111",
        "location": "Algiers",
        "id_0": 0
    }
]

有一次我偶然发现了一个 JSON 文件，其中的数据不在方括号内，而只是常规的大括号 .. {} .. 看来 map 函数不再有意义。见下文：

{
    "id_1": 1,
    "whatever_id": 1,
    "whatever_name": "Blah",
    "id_0": 0
}

我想提醒一下，一旦 react 应用程序编译并且 localhost:**** 启动，数据就不会以表格的形式显示。但是，通过检查应用程序并点击网络选项卡以检查返回调用的内容，我可以看到 API 已成功调用。在这一点上，我给出了表格代码的示例：

<table className='in-line'>
        <thead>
          {(items.length > 0) ? items.map((item, index) => {
            return (
              <Fragment key={index}>
                <tr><th>Blah blah 1</th><td>{item.id_1}</td></tr>
                <tr><th>Blah blah 2</th><td>{item.id_2.nameless_id}</td></tr>
                <tr><th>Name</th><td>{item.id_2.name}</td></tr>
                <tr><th>Blah blah 3</th><td>{item.id_2.wired_id}</td></tr>
                <tr><th>Update</th><td>{item.update}</td></tr>
                <tr><th>Record</th><td>{item.record}</td></tr>
              </Fragment>
            );
          }) : <tr><td colSpan='5'>Data Loading...</td></tr>}
        </thead>
        <tbody>
        </tbody>
      </table>

<th>和内容是随机的<td>，只是为了表明表格是如何形成的。在当前状态下，它可以呈现方括号内的 JSON 文件，但不能仅呈现大括号内的 JSON 文件。

更新#1：我现在包括我的代码，因为我似乎无法让它工作。出于安全原因，我也省略了某些细节。

应用程序.js

import React, { useState } from "react";
import Table from "./components/BasicTable";

const App = () => {
    
    const [droplets, setDroplets] = useState([]);
    const handleClick = () => { 
        const api = "https://1...8"
        
        const token = 'e...w'

        fetch(api, {
            headers: {
                'Content-Type': 'application/json', 
                'Authorization': 'Bearer ' + token}})
        .then((response) => response.json())
        .then((response) => JSON.parse(setDroplets(response)))
    }
    return (
        <div className="App">
            <Table droplets={droplets} handleClick={handleClick}/>
        </div>
    );
};
export default App;

表.js

import React, { Fragment } from "react";
import "./table.css";

const Table = ({ droplets, handleClick }) => {

  return (
    <div className='parent'>
      <table className='in-line'>
        <thead>
          {(droplets.length > 0) ?
            (Object.values(droplets).map((droplet, index) => {
              return (
                <Fragment key={index}>
                  <tr><th>Lamp Fault</th><td>{droplet.lampFault}</td></tr>
                  <tr><th>Autonomy</th><td>{droplet.autonomy}</td></tr>
                            ...............................
                            ...............................
                            ...............................
                  <tr><th>Fully Charged</th><td>{droplet.fullyCharged}</td></tr>
                </Fragment>
              );
            })) : <tr><td colSpan='5'>Loading...</td></tr>}
          </thead>
          <tbody>
          </tbody>
        </table>
      <div className='button-container'>
        <button className='button-style' onClick={handleClick}>LOAD DATA</button>
      </div>
    </div>
  )
}
export default Table;

问题：请原谅，但我看不到当前代码（可能在 fetch 函数内部和/或表格内部）应该如何更改，因此任何提示都将受到赞赏。

UPDATE#2：原来返回的 JSON 文件已经是一个对象，所以不需要解析它。此外，一旦为 JSON 文件创建了几个模型对象，就不需要表中的 .map 函数。我添加了两个模型的实例，以及更新的 Table.js 代码。

LumStatus.js

import WirelessLum from './WirelessLum'

function LumStatus() {
    this.pkid = 0,
    this.wirelessLumid = 0,
    this.lastStatRecStamp = "",
    ..................
    ..................
    ..................
    this.wVersion = "",
    this.tmpLampTestMade = 0,
    WirelessLum
}
export default LumStatus

WirelessLum.js

function WirelessLum() {
    this.pkid = 0,
    this.otherid = 0,
    this.simpSignid = 0,
    ..................
    ..................
    ..................
    this.lumModel = null,
    this.lumStat = []
}
export default WirelessLum

Table.js（更新）

const BasicTable = ({ droplets, handleClick, LumStatus, WirelessLum }) => {

    return (
        <div className='parent'>
            <table className='in-line'>
                <thead>
                    <Fragment>
                        <tr><th>Wireless Luminaire ID</th><td {droplets.wirelessLumid}</td></tr>
                        <tr><th>PKID</th><td>{droplets.wirelessLum && droplets.wirelessLum.pkid}</td></tr>
                        <tr><th>Lamp Name</th><td>{droplets.wirelessLum && droplets.wirelessLum.name}</td></tr>
                        <tr><th>Registered</th><td>{droplets.wirelessLum && droplets.wirelessLum.registered}</td></tr>
                             ......................................
                             ......................................
                             ......................................
                        <tr><th>Lamp Fault</th><td {droplets.lampFault}</td></tr>
                        <tr><th>Lamp Current</th><td {droplets.lampCurrent}</td></tr>
                    </Fragment>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div className='button-container'>
                <button className='button-style' onClick={handleClick}>LOAD DATA</button>
            </div>
        </div>
    )
}
export default BasicTable;

自从创建模型以来，删除 .map 函数并停止从对象到数组的转换似乎不那么复杂且更有用。一个简单的点符号就足以返回一个填充的表。

当涉及到 JSON 文件中的嵌套对象时，由于异步 API 调用，它们被声明为未定义，很可能是因为它们在整个 JSON 信息之前呈现。似乎起作用的是有条件地渲染表中的嵌套对象：{droplets.wirelessLum && droplets.wirelessLum.pkid}

我要感谢大家的贡献！干杯!

标签： javascripthtmlreactjsjson

javascript - 对象的映射函数的 React JS 等价物是什么？（关闭）

问题描述

解决方案

推荐阅读