Reactjs 如何循环此数组？

我正在尝试使用map方法显示此数组的值。数据应该像local-event-age一样以JSX格式显示。就绩效而言，最佳实践是什么？我想避免嵌套映射

const data = [
  {
    cambridge: {
      event: "birthday",
      age: "free"
    },
    boston: {
      event: "beer tasting",
      age: "only adults"
    },
    watertown: {
      event: "porch music festival",
      age: "free"
    }
  }
];

我尝试过类似的东西，但它不是本地事件时代的格式。谢谢大家!

function App() {
  return (
    <div className="App">
      {data.map(obj => (
        <div>
          <div>{Object.keys(obj).map(key => console.log(key))}</div>
          <div>{Object.values(obj).map(key => console.log(key.event, key.age))}</div>
        </div>
      ))}
    </div>
  );
}

---

我想这就是你想要的

function App() {
    return (
        <div className="App">
        {
            data.map(obj => {
                Object.keys(obj).map(key => {
                    return (
                        <div>
                            <div>{key}</div>
                            <div>{obj[key].event} - {obj[key].age}</div>
                        </div>
                    )
                })
            })
        }
        </div>
    );
}

---

我想这就是你想要的

function App() {
    return (
        <div className="App">
        {
            data.map(obj => {
                Object.keys(obj).map(key => {
                    return (
                        <div>
                            <div>{key}</div>
                            <div>{obj[key].event} - {obj[key].age}</div>
                        </div>
                    )
                })
            })
        }
        </div>
    );
}

您可以使用第一个映射中的索引来查找正确的数组项，并使用键访问值。大概是这样的：

const childrenElements = data.map((obj, idx) => 
    Object.keys(obj).map((key) => {
      return (
        <p>
          {key} - {data[idx][key].event} - {data[idx][key].age}
        </p>
      );
    })    
  );

  return (
    <div className="App">
      <div>{childrenElements}</div>
    </div>
  );

下面是一个工作示例：

您可以使用第一个映射中的索引来查找正确的数组项，并使用键访问值。大概是这样的：

const childrenElements = data.map((obj, idx) => 
    Object.keys(obj).map((key) => {
      return (
        <p>
          {key} - {data[idx][key].event} - {data[idx][key].age}
        </p>
      );
    })    
  );

  return (
    <div className="App">
      <div>{childrenElements}</div>
    </div>
  );

---

下面是一个工作示例：

您可以使用es6模板字符串来设置类似于local-event-age的格式

您的代码如下所示

    <div className="App">
      {data.map(obj => (
        <div>
          <div>{Object.values(obj).map(key => console.log(`local - ${key.event} - ${key.age}`))}</div>
        </div>
      ))}
    </div>

---

您可以使用es6模板字符串像local-event-age一样格式化

您的代码如下所示

    <div className="App">
      {data.map(obj => (
        <div>
          <div>{Object.values(obj).map(key => console.log(`local - ${key.event} - ${key.age}`))}</div>
        </div>
      ))}
    </div>

---

是否可以将数据结构更新为局部数组？这将消除对Object.keys的需要，并使代码更干净。@BrunoMonteiro这将是完美的，但后端正在向我发送这样的数据。据我所知，避免嵌套映射的唯一方法是更改后端的结构，因此不需要重复两次。如果这不是一个选项，您可以使用下面的答案之一。好运：是否可以将数据结构更新为本地数组？这将消除对Object.keys的需要，并使代码更干净。@BrunoMonteiro这将是完美的，但后端正在向我发送这样的数据。据我所知，避免嵌套映射的唯一方法是更改后端的结构，因此不需要重复两次。如果这不是一个选项，您可以使用下面的答案之一。祝你好运：你错过了一些小东西@Matt。首先，您需要在单个HTML元素中包装您的s。然后你需要包括一些回报。OP要求的格式也有点不同，因为您有两行。如果您只是将代码复制到codesandbox或类似的工具中，您将看到错误。获取数据的逻辑是正确的，但代码本身需要一些更新才能使用：@BrunoMonteiro很好，我已经找到了答案。我没有包括console.log格式，因为在OP的问题中，它似乎是用于调试的。你在那里遗漏了一些小东西@Matt。首先，您需要在单个HTML元素中包装您的s。然后你需要包括一些回报。OP要求的格式也有点不同，因为您有两行。如果您只是将代码复制到codesandbox或类似的工具中，您将看到错误。获取数据的逻辑是正确的，但代码本身需要一些更新才能使用：@BrunoMonteiro很好，我已经找到了答案。我没有包括console.log格式，因为它似乎是为了在OP的问题中进行调试。他的问题不是关于字符串格式，而是关于数据结构。因此，仅仅使用字符串模板并不能解决问题。而且，这个答案缺少当地人的支持。您只打印事件和时间：他的问题不是关于字符串格式，而是关于数据结构。因此，仅仅使用字符串模板并不能解决问题。而且，这个答案缺少当地人的支持。您仅打印事件和年龄：