反应在表格中显示对象数组

Question

我有一个 object 数组，我需要在表格中显示它们，

我被困在如何显示adjustedAmount、paidAmount 和成本类型上？

这是我拥有的obj：

const datdfa = [
{
  index: 500,
  schudule_number: "11010",
  scheduleAvailableBudget: 1598000,
  budgetedqty: 2000,
  paidQty: 3,
  availableBalance: 1595633,
  adjustedAmount: [{ "Labour Cost": 3, "Material Cost": 0 }],
  paidAmount: [{ "Labour Cost": 1059, "Material Cost": 1059 }]
},
{
  index: 2016,
  schudule_number: "11020",
  scheduleAvailableBudget: 21600,
  budgetedqty: 12,
  paidQty: 10,
  availableBalance: 3663,
  adjustedAmount: [{}],
  paidAmount: [{ "Labour Cost": 468, "Material Cost": 468 }]
}
];

这是要显示的表格

{datdfa?.map((s, d) => {
    let uniqueWSID = `row_${d}`;
      return (
          ...
          <td valign="middle">
              {
                  (s.adjustedAmount)?.map((ad) => {
                      return(
                          <td>{ad.key}</td> // this does not shows up
                      );
                  })
              }
          </td>  

我创建了一个沙盒链接 - 这里

我做错了什么/如何在表格中显示它？

Answer 1

我已经修改了你的沙箱，这里是解决方案（https://codesandbox.io/s/cocky-mendeleev-7nrke?file=/src/App.js ）：

const datdfa = [
{
index: 500,
schudule_number: "11010",
scheduleAvailableBudget: 1598000,
budgetedqty: 2000,
paidQty: 3,
availableBalance: 1595633,
adjustedAmount: [{ LabourCost: 3, MaterialCost: 0 }],
paidAmount: [{ LabourCost: 1059, MaterialCost: 1059 }]
},
{
index: 2016,
schudule_number: "11020",
scheduleAvailableBudget: 21600,
budgetedqty: 12,
paidQty: 10,
availableBalance: 3663,
adjustedAmount: [{}],
paidAmount: [{ LabourCost: 468, MaterialCost: 468 }]
}
];

export default function App() {
  return (
 <div>
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
  </div>
  <div>
    <table>
      <thead>
        <tr>
          <th>index</th>
          <th>schudule_number</th>
          <th>scheduleAvailableBudget</th>
          <th>budgetedqty</th>
          <th>paidQty</th>
          <th>availableBalance</th>
          <th>adjustedAmount</th>
          <th>paidAmount</th>
        </tr>
      </thead>

      <tbody>
        {datdfa.map((column) => (
          <tr>
            <td>{column.index}</td>
            <td>{column.schudule_number}</td>
            <td>{column.scheduleAvailableBudget}</td>
            <td>{column.budgetedqty}</td>
            <td>{column.paidQty}</td>
            <td>{column.availableBalance}</td>
            <td>
              {column.adjustedAmount.map((amount) => (
                <span>
                  <span>{"LabourCost " + amount.LabourCost}</span>
                  <span>{"Material Cost " + amount.MaterialCost}</span>
                </span>
              ))}
            </td>
            <td>
              {column.paidAmount.map((amount) => (
                <span>
                  <span>{"LabourCost " + amount.LabourCost}</span>
                  <span>{"Material Cost " + amount.MaterialCost}</span>
                </span>
              ))}
            </td>
          </tr>
        ))}
      </tbody>
     </table>
     </div>
    </div>
  );
}

Answer 2

您的沙箱是空的。 无论如何，我认为这可能是您 map 并显示的部分的问题，请尝试：

  {s.adjustedAmount?.map((ad) => (
    <td>{ad.key}</td> 
  ))}

@edit 这是 沙箱

基本上你不应该创建这样的数组元素，通常最好使用{name: "someName", value: 1}的对象，这样你就可以通过每个对象的name和value来 map。 这就是我在沙盒中制作它的方式。 通过所有值更容易 map。 在此示例中，您只有 2 个元素，但如果您想要 1000 个或更多元素，则必须对每个元素进行硬编码……这将浪费很多时间。