Question

TypeError：this.state.data.map不是函数尝试访问本地json数据。从'react'导入React，{组件}; 导入“ ./index.css”

   class App extends Component {
     constructor(){
        super() 
        this.state = {
         data: []
         }

       }
     componentDidMount()
      {
        fetch("./employeeData.json")
       .then(res => res.json()) 
       .then(daabta => {
        this.setState({data: daabta })
        } )
       }
     render() {
       return (
         <table>
          <tbody>{this.state.data.map((item, index) => 
            <tr key = {index}>
              <td>{item.userId}</td>
              <td>{item.firstName}</td>
              <td>{item.lastName}</td>
              <td>{item.region}</td>
             </tr>
            )      
           })}</tbody>
         </table>
        )
       }
      }
     export default App;

Answer 1

您可以直接将json文件导入组件顶部，例如

import * as employeeData from "./employeeData.json";

但是请注意，您的json数据将位于对象default中，因此，当您要访问数据时，应使用employeeData.default

从本地文件中获取json数据

1 个答案: