如何在 React js 中映射 JSON 数据？

Question

我想以键值方式映射 JSON 数据。我在 stackblitz 上尝试过，但显示错误。

我写的代码：

import React from "react";
import ReactDOM from "react-dom";

const sampleJSON = {
  name: "Pluralsight",
  number: 1,
  address: "India",
  website: "https://www.pluralsight.com/"
};

function App() {
  return (
    <div>
      {Object.keys(sampleJSON).map((key, i) => (
        <p key={i}>
          <span>Key Name: {key}</span>
          <span>Value: {sampleJSON[key]}</span>
        </p>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

我遇到的错误是：

Error in /turbo_modules/react-dom@17.0.0/cjs/react-dom.development.js (26083:13) Target container is not a DOM element.

https://stackblitz.com/edit/react-lyrp91

Answer 1

您必须导出默认的 React 组件。通过更改此行

，我让它在沙箱 (link) 中工作

ReactDOM.render(<App />, document.getElementById("app"));

至此

export default App;

Answer 2

您需要导出 app component 而不是将其渲染到元素 ID 应用程序。问题是它试图找到元素 id app，但在 DOM 中找不到。然而 index.js 做同样的事情，所以你不必做 ReactDOM.render 的事情。

ReactDOM.render(<App />, document.getElementById("root")); // you will find this line in index.js, you don't need to do this in app.js

Stackblitz Link

import React from "react";

const sampleJSON = {
  name: "Pluralsight",
  number: 1,
  address: "India",
  website: "https://www.pluralsight.com/"
};

export default function App() {
  return (
    <div>
      {Object.keys(sampleJSON).map((key, i) => (
        <p key={i}>
          <span>Key Name: {key}</span>
          <span>Value: {sampleJSON[key]}</span>
        </p>
      ))}
    </div>
  );
}

如何在 React js 中映射 JSON 数据？

How to map JSON data in react js?

javascript

reactjs

react-dom