时间戳

首页 > 解决方案 > 将 React 状态对象转换为正确的 JSON 模式

javascript - 将 React 状态对象转换为正确的 JSON 模式

问题描述

我正在使用 React 开发一个漂亮的 todo 应用程序，并且刚刚从一个工作示例开始，我正在设置示例数据状态，如下所示：

this.state = {
  Task: [{
      name: "Art",
      items: [{
          item: 'Work on glazing technique',
          isDone: false,
          dateCompleted: ""
        },
        {
          item: 'Prank call Dali and hang up',
          isDone: true,
          dateCompleted: "07/15/2018"
        },
        {
          item: 'Prepare new Masonite panels',
          isDone: true,
          dateCompleted: "07/15/2018"
        },
        {
          item: 'Purchase sable brush',
          isDone: true,
          dateCompleted: "07/15/2018"
        }
      ]
    },
    {
      name: "Music",
      items: [{
          item: 'Work on Symphony',
          isDone: false,
          dateCompleted: ""
        },
        {
          item: 'Finish Berklee class',
          isDone: true,
          dateCompleted: "07/12/2018"
        },
        {
          item: 'Practice guitar',
          isDone: true,
          dateCompleted: "07/10/2018"
        },
        {
          item: 'Build new studio',
          isDone: true,
          dateCompleted: "07/10/2108"
        }
      ]
    },
    {
      name: "Writing",
      items: [{
          item: 'Finish novel structure',
          isDone: false,
          dateCompleted: ""
        },
        {
          item: 'Work on middle part',
          isDone: true,
          dateCompleted: "07/08/2018"
        },
        {
          item: 'Puchase some index cards',
          isDone: true,
          dataCompleted: "07/08/2018"
        }
      ]
    }
  ],
  filter: [{
    keyword: '',
    Status: "SHOW_ALL"
  }],
  selectedProject: "0"
};

所以，我现在要设置 axios 并通过 JSON 读取我的数据，而不是显式设置它。当然，下一步将设置 express 并将 JSON 读/写到数据库。

但是在将我的任务对象转换为 JSON 时，我做得并不好。这是我到目前为止所拥有的：

{
  "name": "Art",
  "items": [{
      "item": "Work on glazing technique",
      "isDone": "false"
    },
    {
      "item": "Prank call Dali and hang up",
      "isDone": "true"
    },
    {
      "item": "Prepare new Masonite panels",
      "isDone": "true"
    },
    {
      "item": "Purchase sable brush",
      "isDone": "true"
    }
  ]
}, {
  "name": "Music",
  "items": [{
      "item": "Work on Symphony",
      "isDone": "false"
    },
    {
      "item": "Finish Berklee class",
      "isDone": "true"
    },
    {
      "item": "Practice guitar",
      "isDone": "true"
    },
    {
      "item": "Build new studio",
      "isDone": "true"
    }
  ]
}, {
  "name": "Writing",
  "items": [{
      "item": "Finish novel structure",
      "isDone": "false"
    },
    {
      "item": "Work on middle part",
      "isDone": "true"
    },
    {
      "item": "Puchase some index cards",
      "isDone": "true"
    },
    {
      "item": "Install Scrivener",
      "isDone": "true"
    }
  ]
}, {
  "filter": [{
    "keyword": "",
    "Status": "SHOW_ALL"
  }],
  "selectedCatelog": 0
}

在关闭的第一个实例中，}, {它会在导入时引发错误，说：

syntax error, encountered comma

奇怪的是，JSON 验证器说我的 JSON 是有效的。我没有正确构建我的 JSON。

基本上我想我在这里有一个收藏。包含多个键值对的字典，第二个“项目”是一个项目数组。

我确信正确地构造它非常简单，但是有人可以给我一个提示吗？谢谢！

标签： javascriptjsonreactjs

解决方案

您发布的 json 无效（您可以在此处查看），您似乎想要呈现一个对象列表。

因此，您将需要用一个数组包装整个事物：

[
  {
    "name": "Art",
    "items": [
      {
        "item": "Work on glazing technique",
        "isDone": "false"
      },
      {
        "item": "Prank call Dali and hang up",
        "isDone": "true"
      },
      {
        "item": "Prepare new Masonite panels",
        "isDone": "true"
      },
      {
        "item": "Purchase sable brush",
        "isDone": "true"
      }
    ]
  },
  {
    "name": "Music",
    "items": [
      {
        "item": "Work on Symphony",
        "isDone": "false"
      },
      {
        "item": "Finish Berklee class",
        "isDone": "true"
      },
      {
        "item": "Practice guitar",
        "isDone": "true"
      },
      {
        "item": "Build new studio",
        "isDone": "true"
      }
    ]
  },
  {
    "name": "Writing",
    "items": [
      {
        "item": "Finish novel structure",
        "isDone": "false"
      },
      {
        "item": "Work on middle part",
        "isDone": "true"
      },
      {
        "item": "Puchase some index cards",
        "isDone": "true"
      },
      {
        "item": "Install Scrivener",
        "isDone": "true"
      }
    ]
  },
  {
    "filter": [
      {
        "keyword": "",
        "Status": "SHOW_ALL"
      }
    ],
    "selectedCatelog": 0
  }
]

推荐阅读