为什么 jsonData 不读取文件？

Question

我有一个 json 文件：

[ {
  "symbol" : "SPY",
  "type" : "etf"
}, {
  "symbol" : "CMCSA",
  "type" : "stock"
}, {
  "symbol" : "KMI",
  "type" : "stock"
}, {
  "symbol" : "INTC",
  "type" : "stock"
}, {
  "symbol" : "MU",
  "type" : "stock"
},
...

我正在尝试将其读入表格：

const Home = () =>{
    const displayStockCodes = (info) =>{
        JsonData.map(
            (info)=>{
                return(
                    <tr>
                        <td>{info.symbol}</td>
                        <td>{info.type}</td>
                    </tr>
                )
            }
        );
    };
    
    return (
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                    <th>Symbol</th>
                    <th>Type</th>
                    </tr>
                </thead>
                <tbody>                
                    {displayStockCodes}               
                </tbody>
            </table>
             
        </div>

    );
};

export default Home;

我试着按照指南去做，但最终页面上只显示了Symbol和Type ，数据本身并没有输出。 也许我需要添加其他东西？

Answer 1

1. displayStockCodes是一个函数，但您没有在需要调用该函数的tbody中调用它。

2. displayStockCodes也不返回任何你需要的东西来确保它返回一些JSX代码。

const Home = () =>{
    const displayStockCodes = (info) =>{
        // 2. you need to return 
        return JsonData.map(
            (info)=>{
                return(
                    <tr>
                        <td>{info.symbol}</td>
                        <td>{info.type}</td>
                    </tr>
                )
            }
        );
    };
    
    return (
        <div>
            <table className="table table-striped"> <!-- use className here instead of class -->
                <thead>
                    <tr>
                    <th>Symbol</th>
                    <th>Type</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- you need to call this -->     
                    {displayStockCodes()}               
                </tbody>
            </table>
             
        </div>

    );
};

export default Home;

Answer 2

const Home = () => {
    const JsonData = [
        {
            symbol: 'SPY',
            type: 'etf',
        },
        {
            symbol: 'CMCSA',
            type: 'stock',
        },
        {
            symbol: 'KMI',
            type: 'stock',
        },
        {
            symbol: 'INTC',
            type: 'stock',
        },
        {
            symbol: 'MU',
            type: 'stock',
        },
    ];

    const displayStockCodes = () => {
        return JsonData.map((info) => (
            <tr>
                <td>{info.symbol}</td>
                <td>{info.type}</td>
            </tr>
        ));
    };


    return (
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Symbol</th>
                        <th>Type</th>
                    </tr>
                </thead>
                <tbody>{displayStockCodes()}</tbody>
            </table>
        </div>
    );
};

export default Home;

输出：