如何使用 react js 发布 JSON 数据？答案

【问题标题】：How do I POST JSON data with react js?如何使用 react js 发布 JSON 数据？
【发布时间】：2020-05-05 00:10:41
【问题描述】：

我在 react js 中有以下代码。

import React from 'react';
import imagesdata from '..data/images.json';

function imagedata() {
  return (

        <div>
      {imagesdata.headerimgs.map((experience, i)=>{
       return (
        <div key={i}>
       <div>
       <h1>{experience.webimg}</h1>
       </div>
       );
                  }
       )
        }
            </div>
  );
}
export default imagedata

运行此代码后出现错误

 Parsing error: Unexpected token, expected ","

  19 |   );
  20 | }
> 21 | export default imagedata

【问题讨论】：

标题不正确。问题不在于发布数据。

标签： javascript html json reactjs react-native

【解决方案1】：

您的代码中存在语法错误。 map函数里面多了一个div<div key={i}> *<div>*

import React from "react";
import imagesdata from "../data/images.json";

function imagedata() {
  return (
    <div>
      {imagesdata.headerimgs.map((experience, i) => (
        <div key={i}>
          {" "}
          <h1>{experience.webimg}</h1>
        </div>
      ))}
    </div>
  );
}
export default imagedata;

【讨论】：

为了清楚起见，请评论包含语法错误的部分。
./src/data/images.json Module parse failed: Unexpected token } in JSON at position 385 while paring near '...tube.png", } ] }' 你可能需要一个合适的loader 来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅webpack.js.org/concepts#loaders SyntaxError: Unexpected token } in JSON at position 385 while parsing near '...tube.png", } ] }' at JSON.解析（）
images.json json 文件格式不正确。你可以在这里验证 json jsonlint.com

【解决方案2】：

可能其中一个导入有错误：

import imagesdata from '..data/images.json';

缺少/。改写为：

import imagesdata from '../data/images.json';

【讨论】：