Question

如何在组件中调用json数据

2019-08-30

96

javascript json reactjs

我正在尝试通过组件呈现 json 数据，但我认为我缺少了一些东西

timetable.json

{
  "items": [
    {
      "id": "1",
      "day": "Cumartesi",
      "events": [
        {
          "key": "1",
          "start": "09:00",
          "end": "09:30",
          "event": "Toplanma ve Kahvaltı"
        },
...

App.js

const [timeTableData, setTimeTableData] = useState([])
  useEffect(() => {
    const fetchData = async () => {
      const tTableResult = await axios('./timetable.json')
      setTimeTableData(tTableResult.data.items[0])
    }
    fetchData()
  }, [])

Component.js

const { items } = props

   const listGroupItems = Object.keys(items.events).map((item) => {
        return (
          <CardBody key={item.key}>
            {item.start}
            {item.end}
            {item.event}
          </CardBody>
        )
    })

我收到“TypeError：无法将未定义或 null 转换为对象”

Answer 1

您尝试在数据到达之前访问 items.events 。请先检查它是否存在

   const listGroupItems = items.events ? Object.keys(items.events).map((item) => {
        return (
          <CardBody key={item.key}>
            {item.start}
            {item.end}
            {item.event}
          </CardBody>
        )
    }) : null

Answer 2

问题出在这行

setTimeTableData(tTableResult.data.items[0])

请删除 data ，因为它未在您提到的 JSON 结构中定义。因此，您可能会收到 TypeError：无法将 undefined 或 null 转换为 object