当我在反应中解析 JSON 时，是什么导致了困难？白屏结果

Question

我意识到这可能是一个非常初学者的问题，但我不明白这里出了什么问题我已将问题简化为这个，我正在尝试编写一个存储计算器及其值的基本应用程序，以便我可以工作同时在多个不同的计算器上，这是我在 react .jsx 文件中的基本代码

function CalcParse(){
    let calculators = require('./Calcs.json')
        .JSON.parse
        .calcs;

    return(
    <div>
        {calculators.map(calc => <p key={calc.name}>{calc.name}</p>)}   
    </div>
        
    )
}

我的 .JSON 文件是

{   "calcs":[
    {
        "name":"Extended Surface Rod",
        "args":"h, k, D"
    },
    {
        "name":"Default Calculator",
        "args":"A,B"
    }]
}

然后我的 index.js 文件是

import ReactDOM from 'react-dom';
import React from 'react';
import CalcParse from './CalcParse.jsx'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <CalcParse/>
  </React.StrictMode>
);

令人恼火的是，我的代码编译正常，但返回时出现白色屏幕

Answer 1

您可以通过require直接使用json文件。

function CalcParse(){
    let calculators = require('./Calcs.json');

    return(
    <div>
        {calculators.calcs.map(calc => <p key={calc.name}>{calc.name}</p>)}   
    </div>
        
    )
}

更好的方法是：

import calculators from './Calcs.json';

// ...

function CalcParse(){
    return (
    <div>
        {calculators.calcs.map(calc => <p key={calc.name}>{calc.name}</p>)}   
    </div>

    )
}

当我在反应中解析 JSON 时，是什么导致了困难？白屏结果

What is causing difficulty when I am parsing JSON in react? White screen result

parsing

json

functional-programming

reactjs