我無法在ReactJS的表格中添加按鈕

我想（查看）表格中的按鈕，但出現此錯誤：

模塊決議失敗：Unexpected token < in JSON at position 165 while parsing near '...2021", "view": <button type="submit...' 你可能需要一個合適的加載器來處理這個檔案型別，目前，沒有配置加載器來處理這個檔案。請參閱https://webpack.js.org/concepts#loaders SyntaxError: Unexpected token < in JSON at position 165 while parsing near '...2021", "view": <button type="submit...' at JSON .決議（）

這是IncomingMessagesTable.js：

import React, { useMemo } from 'react';
import { useTable } from 'react-table';
import { IncomingMessagesColumns } from './IncomingMessagesColumns';
import IncomingMessagesData from './IncomingMessagesData.json';
import '../Table.css'

export const IncomingMessagesTable = () => {
  const columns = useMemo(() => IncomingMessagesColumns, [])
  const data = useMemo(() => IncomingMessagesData, [])
  const tableInstance = useTable({
    columns,
    data
  })

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = tableInstance

   return (
     <div>
          
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
    </div>
  );
}
onLoadMore = () => {
  this.setState({
    usersToShow: this.state.usersToShow   1,
  });
};
export default IncomingMessagesTable;

這是IncomingMessagesColumns.json：

    export const IncomingMessagesColumns = [
  {
    Header : "??? ??????",
    accessor : "senderName"
  },
  {
    Header : "??? ??????",
    accessor : "senderType"
  },
  {
    Header : "????? ???????",
    accessor : "messageAddress"
  },
  {
    Header : "????? ???????",
    accessor : "dateOfMessage"
  },
  {
    Header : "?????",
    accessor : "view",
  
  }
]

這是IncomingMessagesData.json：

[
  {
    "senderName": "????",
    "senderType": "????",
    "messageAddress": "????? ??? ?????? ???? ??????",
    "dateOfMessage": "11/12/2021",
    "view": <button type="submit">??? ???????</button>
  }
]

uj5u.com熱心網友回復：

"view": <button type="submit">??? ???????</button>

這不是 JSON 的有效資料。你可以像這樣用雙引號包裹它

"view": "<button type="submit">??? ???????</button>"

uj5u.com熱心網友回復：

根據webpack檔案：

開箱即用，webpack 只理解 JavaScript 和 JSON 檔案。加載器允許 webpack 處理其他型別的檔案，并將它們轉換為可以被您的應用程式使用并添加到依賴關系圖中的有效模塊。

因此，您應該在沒有任何加載程式的情況下匯入 JSON 檔案，但錯誤顯示您的IncomingMessagesData.json檔案需要另一個加載程式，因為該JSON檔案沒有有效的 JSON 格式。您可以使用一些在線網站（如jsonlint）來驗證您的 JSON 物件

所以改變IncomingMessagesData.json：

[
  {
    "senderName": "????",
    "senderType": "????",
    "messageAddress": "????? ??? ?????? ???? ??????",
    "dateOfMessage": "11/12/2021",
    "view": "<button type='submit'> ??? ??????? </button>"
  }
]

注意：注意view屬性中的引號，JSON格式的，需要key/value用雙引號括起來，所以需要把submit引號改成單引號。

標籤：javascript 反应 json

上一篇：為什么不帶引數的gitpull會產生與gitpullorigin<branchname>不同的結果，其中<branchname>是當前活動分支？

下一篇：告訴我，我怎樣才能從這個物件陣列中獲取一個物件的下一個陣列？