javascript - 如何分离编辑和更新上下文(admin-on-rest，点符号)

Question

我正在使用 npm 包 admin-on-rest为我的 elixir/phoenix REST API 后端构建 React 后台。

My questions/:id (show action) 返回以下平面 JSON 结构:

{
  id: 7
  content: "<p> Question content here</p>"
  points: 300
  title: "Question title"
}

我的更新操作需要以下嵌套 JSON 作为更新问题的输入:

{
  id: 7
  question: {
    content: "<p>New question content</p>"
    points: 400
    title: "New question title"
  }
}

---

我的问题与 admin-on-rest 中使用的点符号有关

如果我使用以下 JS 代码来表示后台中的 edit 操作

export const QuestionEdit = (props) => (
  <Edit title={<QuestionTitle />} {...props}>
    <SimpleForm>
      <DisabledInput source="question.id" />
      <TextInput source="question.title" />
      <LongTextInput source="question.content"/>
      <TextInput source="question.points" />
    </SimpleForm>
  </Edit>
)

然后我在 PUT 请求有效负载中有正确的数据，但在“编辑”表单输入中没有呈现任何值(参见屏幕截图 1)

如果我使用另一种 JS 代码变体(具有扁平源值):

export const QuestionEdit = (props) => (
  <Edit title={<QuestionTitle />} {...props}>
    <SimpleForm>
      <DisabledInput source="id" />
      <TextInput source="title" />
      <LongTextInput source="content"/>
      <TextInput source="points" />
    </SimpleForm>
  </Edit>
)

然后“编辑”表单中的所有先前输入值都正确表示，但我的 update 操作无法解析 PUT 请求负载(参见屏幕截图 2)

---

假设我不想更改我的后端 API(因为它是由 phoenix 代码生成器自动生成的)，我如何编辑我的 JS 代码以实现 2 个目标 - 应该正确呈现以前的值(编辑页面)应该为 update 操作提供嵌套的 JSON 结构

非常感谢您的关注!

Answer 1

看看使用自定义 action .基本上您的表单使用扁平化的数据呈现，因此当您使用(id、title 等)时它会正确显示。然后，您需要先转换该数据，然后再将其PUT 到您的服务器。