Map 內 map 值

Question

我嘗試只為數據數組中的每個項目顯示我需要用表顯示它的名稱鍵。

const data = [{id: "111", name: "Danny", city: "NYC"},
              {id: "222", name: "Roni", city: "LDN}, 
              {id: "333", name: "Suzi", city: "TLV",
              {id: "444", name: "John", city: "SF"}
             ]
const config = [{fieldToShow: "name"}]


  <tbody>
  {data.map((row) => {
    return (
      <tr>
        {config.map((value) => {
          return <td>{row[value.field]}</td>;
        })}
      </tr>
    );
  })}

但它不起作用......

Answer 1

您的配置 object 有一個關鍵fieldToShow ：

const config = [{fieldToShow: "name"}]

當您嘗試獲取 map 中的關鍵字field時。 你改變這一行：

  return <td>{row[value.field]}</td>;

對此：

  return <td>{row[value.fieldToShow]}</td>;

Answer 2

你可以這樣做：

export default function Test() {
  const data = [
    { id: '111', name: 'Danny', city: 'NYC' },
    { id: '222', name: 'Roni', city: 'LDN' },
    { id: '333', name: 'Suzi', city: 'TLV' },
    { id: '444', name: 'John', city: 'SF' },
  ];
  const config = [{ fieldToShow: 'name' }];

  return (
    <tbody>
      {data.map((row) => (
        <tr>
          {data.map((row) => (
            <tr>
              {config.map((value) => (
                <td>{row[value.fieldToShow]}</td>
              ))}
            </tr>
          ))}
        </tr>
      ))}
    </tbody>
  );
}