到达表单挂钩复杂的嵌套对象获取并提交更改到 api

Question

我已经开始使用这个库并遇到了一个问题。

基本上我有以下从 api 请求收到的对象结构。

{
  "introduction": "hello",
  "imageUri": "someimage.jpg",
  "sections": [
    {
      "subSections": [
        {
          "sectionMedia": [
            {
              "externalUri": "https://vimeo.com/1212",
              "id": 17127,
              "type": "video",
              "name": null,
              "description": null,
              "displayOrder": null,
            }
          ],
          "id": 172,
          "name": "Section 1",
          "displayOrder": 1,
        },
        {
          "sectionMedia": [
            {
              "externalUri": "https://vimeo.com/1212",
              "id": 178121,
              "type": "video",
              "name": null,
              "description": null,
              "displayOrder": null
            }
          ],
          "id": 178121,
          "name": "Section 2",
          "displayOrder": 2
        },
      ],
      "sectionMedia": [
        {
          "externalUri": "external.jpg",
          "id": 176,
          "type": "download",
          "name": "Bar Modelling - Series 1 Workbook",
          "description": null,
          "displayOrder": null,
          "createdAt": "2020-06-08T05:13:25+00:00",
          "createdByUser": "/users/109",
          "updatedAt": "2020-07-16T23:08:29+00:00",
          "updatedByUser": "/users/109"
        }
      ],
      "id": 17111,
      "name": "Series",
      "description": "some description",
      "displayOrder": 1,
  ]
}

因此，一旦用户编辑了数据并且这可能不是我需要提交的所有字段并将其与我们收到的对象合并并将完整对象发布回服务器。

但是，如果我在数组中编辑某些内容，我需要显示为数组名称，例如，如果我在 sectionMedia 中更新了 id 为 176 的 externalUri，它在提交结构时应该具有正确的对象结构，如下所示：

name: "some name" externalUri: "newimage.jpg"

所以想看看是否有一种很好的方法可以做到这一点，而无需实际搜索对象并在执行 onblur 时替换会影响性能

希望这是有道理的

Answer 1

不确定这是否是您想要的，但我们可以遍历对象

 const [ fields, setFields ] = useState(
    {
      "externalUri": "external.jpg",
      "id": 176,
      "type": "download",
      "name": "Bar Modelling - Series 1 Workbook",
      "description": null,
      "displayOrder": null,
      "createdAt": "2020-06-08T05:13:25+00:00",
      "createdByUser": "/users/109",
      "updatedAt": "2020-07-16T23:08:29+00:00",
      "updatedByUser": "/users/109"
    })

我们在这里渲染输入。

return Object.keys(fields).map( item => <input name={item} value={fields[item]} onChange={onChange} />

然后对于onchange..我们使用输入名称并将其添加回对象。

const onChange = (e) => {
    const value = e.target.value
    const name = e.target.name
    setFields( prev => ({ ...fields, [name]: value})) //this retains the original object, but change only the edited field
}

虽然.. 将整个文档提交回服务器可能是不好的做法。

您应该只提交已更改的字段。

为什么？

因为我们不能信任客户提交的任何内容，如果您合并并重新提交整个文档，您需要确保重新验证整个文档。