Question

我是React的新手，我的json文件解析问题需要一个。我有一个PerfCompare.jsx，下面的比较中需要一个变量。我需要从外部JSON文件（trscConfig.JSON）进行此var解析。我正在用这条线做。但始终会在JSON数据的第1行第1列中获得此SyntaxError：JSON.parse：意外字符 trscConfig.JSON

     select
            vp_timesheetpunch.personnum [Assoc ID],
            vp_timesheetpunch.personfullname [Assoc Name],
            vp_timesheetpunch.laborlevelname1 [Department],
            vp_timesheetpunch.laborlevelname4 [Salary Code],
            vp_timesheetpunch.eventdate [Shift Date],
            shiftassignmnt.shiftstartdate [Scheduled Start],
            vp_timesheetpunch.startdtm [Rounded Start],
            vp_timesheetpunch.inpunchdtm [Actual Start],
            vp_timesheetpunch.enddtm [Rounded End],
            vp_timesheetpunch.outpunchdtm [Actual End],
            vp_timesheetpunch.TIMEINSECONDS [Time in seconds],
            convert(decimal(7,2),vp_timesheetpunch.TIMEINSECONDS/3600.0) [Time in hours]
        from
            vp_timesheetpunch
        left outer join
            vp_punchexceptions
        on
            vp_timesheetpunch.timesheetitemid = vp_punchexceptions.timesheetitemid
        inner join
            timesheetitem
        on
            vp_timesheetpunch.timesheetitemid = timesheetitem.timesheetitemid
        inner join
            workedshift
        on
            timesheetitem.workedshiftid = workedshift.workedshiftid
        inner join
            shfasgnwshfmm
        on
            workedshift.workedshiftid = shfasgnwshfmm.workedshiftid
        inner join
            shiftassignmnt
        on
            shfasgnwshfmm.shiftassignid = shiftassignmnt.shiftassignid
        where
            --limit rows to the specified pay period
            vp_timesheetpunch.eventdate = '1/22/2019'
            --exclude rows that are missing data
            and vp_timesheetpunch.inpunchdtm is not null
            and vp_timesheetpunch.outpunchdtm is not null
            --limit rows to shifts with exceptions
        order by
            vp_timesheetpunch.personnum,
            vp_timesheetpunch.eventdate

PerfCompare.jsx

{
     "server" : "http://myserver.com"
}

Answer 1

使用fetch()：

Contents/Resources

或者，如果您的构建工具尚不支持for plist in /Applications/*.app/Contents/Info.plist; do if [ "$(defaults read "${plist%.plist}" CFBundleExecutable)" = Example ]; then echo rm -R -- "${plist%/Contents/Info.plist}" # remove "echo" to actually do it fi done：

const response = await fetch('trscConfig.JSON');
const json = await response.json();
const server_2 = json.server;

在任何一种情况下，在运行时下载JSON文件都将意味着响应不会立即可用。如果这是一个React组件，我建议在await中这样做。

或者，如果JSON文件是静态资产：

fetch('trscConfig.JSON')
  .then(response => response.json())
  .then(json => {
    const server_2 = json.server;
  });

Answer 2

JSON.parse不知道如何发出HTTP请求/读取文件-它只是精确解析您传递的内容。在这种情况下，由于尝试转换文字字符串{{1} }转换成JSON对象！

有两种方法可以使它工作：

通过模块捆绑程序加载JSON，就像您在代码的注释行中所做的那样。我相信Webpack（和大多数其他）都开箱即用地支持此功能，但是您的配置可能有意或以其他方式禁用了它。也可能是因为您使用的是大写文件扩展名-尝试使用./trscConfig.JSON小写的文件。
使用XMLHttpRequest，Fetch API或第三方HTTP客户端库在运行时下载JSON，然后解析下载的文本。

如何解析.jsx文件中的外部JSON文件

2 个答案: