Question

我正在尝试从.json文件导入和迭代数据。

为此，我正在导入.json文件，并使用map函数遍历App.js文件中所示的数据

App.js

import React from 'react';
import characters from "./data/characters.json"
import './App.css';

function App() {
  return (
    <div className="App">
      <ul>
        {
          characters.map(character => {
            return <li key={character.name}>{character.name}</li>
          })
        }
      </ul>
    </div>
  );
}

export default App;

characters.json

{
  "characters": [
    {
      "name": "Luke Skywalker",
      "url": "https://swapi.co/api/people/1/"
    },
    {
      "name": "C-3PO",
      "url": "https://swapi.co/api/people/2/"
    },
    {
      "name": "Leia Organa",
      "url": "https://swapi.co/api/people/unknown/"
    },
    {
      "name": "R2-D2",
      "url": "https://swapi.co/api/people/3/"
    }
  ]
}

但是我收到错误消息“ .map不是函数”。谁能告诉我该如何纠正我的错误？

Answer 1

因为要以characters名称导入文件，并且该文件包含一个对象，并且该对象包含characters属性。所以应该是这样：

function App() {
  return (
    <div className="App">
      <ul>
        {
          characters.characters.map(character => {
            return <li key={character.name}>{character.name}</li>
          })
        }
      </ul>
    </div>
  );
}

您可以将文件导入为其他名称，以防止名称混淆。

import charactersFile from "./data/characters.json"

...

charactersFile.characters.map(character => {

如何从.JSON文件导入数据并在React中对其进行迭代？

1 个答案: