REACT-Display 我的 json 文件的内容，但只得到 header

Question

我无法在 table 中显示 json 文件的内容。我得到 headers 但单元格中没有任何内容。

这是我的代码：

import Table from './Table'
import Menu from "./menus.json"


export default function Display() {
    const [menu, setMenu] = useState([Menu]);


    const data = useMemo(() => [
        {
            Header: 'Id',
            accessor: menu.id,
        },
        {
            Header: 'Title',
            accessor: menu.title,
        },
        {
            Header: 'Invited',
            accessor: menu.invited.name,
        },
        {
            Header: 'Price',
            accessor: menu.price,
        },
    ], [])
    return (

        <Table data={menu} columns={normalizeData(data.result)}>
    )

}

就在 return 之前，我尝试了 Object.keys(data).map((key) => ({id: key,}));但不起作用。

感谢您的帮助！

Answer 1

我认为它应该是 Menu.menus 或者你可以将它解构为：

const {menus} = Menu

Answer 2

import { menus } from "./menus.json";

也许你会尝试这样做？

Answer 3

JSON数据是一个对象：

{
  "menus": [
    {
      "id": "Menu1",
      "title": "Creamy pea soup topped with melted cheese and sourdough croutons.",
      "price": 4,
      "invited": [
        {
          "name": "Jose Luis",
          "location": "LA"
        },
        {
          "name": "Smith",
          "location": "New York"
        },
      ],    
    },
    ...
  ]
}

...

import JsonData from "./menus.json";

...

const { menus } = JsonData;

accessor 属性不正确。

Column Options

accessor: String | Function(originalRow, rowIndex) => any
- 必需
- 此 string/function 用于为您的列构建数据模型。
- 访问器返回的数据应该是原始的并且是可排序的。
- 如果传递字符串，将通过该键在原始行中查找列的值，例如。如果您的列的访问器是 firstName，那么它的值将从 row['firstName'] 中读取。您还可以使用访问器指定深度嵌套的值，例如 info.hobbies 甚至 address[0].street
- 如果传递函数，将使用此访问器函数在原始行上查找列的值，例如。如果您的列的访问器是 row => row.firstName，那么它的值将通过将行传递给此函数并使用结果值来确定。
- 从技术上讲，如果您有一个列的唯一 ID，则不需要此字段。这用于扩展器或行选择列之类的东西。警告：如果您真的知道自己在做什么，请仅省略 accessor。

使用 stimified 访问器

const data = useMemo(
  () => [
    {
      Header: "Id",
      accessor: "id"
    },
    {
      Header: "Title",
      accessor: "title"
    },
    {
      Header: "Invited",
      accessor: "invited[0].name" // because invited is an array
    },
    {
      Header: "Price",
      accessor: "price"
    }
  ],
  []
);

或者使用函数

const data = useMemo(
  () => [
    {
      Header: "Id",
      accessor: row => row.id
    },
    {
      Header: "Title",
      accessor: row => row.title
    },
    {
      Header: "Invited",
      accessor: row => row.invited[0].name
    },
    {
      Header: "Price",
      accessor: row => row.price
    }
  ],
  []
);

REACT-Display 我的 json 文件的内容，但只得到 header

REACT-Display content of my json file but get only the header

javascript

json

data-extraction

reactjs

react-hooks