如果填充了表单，则在 React 中构造 POST Json

Question

我正在努力通过 React Form 为 POST 请求构建数据。 type 会根据填充的 Form.Control 更改，如果填充了三分之二（或全部三个），则会在顶层添加一个 And 并填充 metadata 类型。

metadata 类型分为三个级别：TeamXToScoreOverYGoals、TeamXToFinishInTopYPosition 和 TeamXToGetOverYPoints。

首先，这是组件。目前simulatorApi.runSim 正在发送一个空的有效载荷：

export default function App() {
  const [teamX, setTeamX] = useState("");
  const [goalX, setGoalX] = useState(0);
  const [posx, setPosX] = useState(0);
  const [ptx, setPtX] = useState(0);

  const handleSubmit = () => {
    simulatorApi.runSim(
      []
    );
    alert("submitted");
  };

  return (
      <h1>POST Constructor</h1>
      <Form onSubmit={handleSubmit}>
        <Form.Row>
        <Form.Group controlId="teamX" bssize="large">
            <Form.Label>Team B</Form.Label>
            <br />
            <StyledInput
              as="select"
              required
              value={teamX}
              onChange={(e) => {
                setTeamA(e.target.value);
              }}
              className="smaller-input"
            >
              <option value={"Liverpool"}>Liverpool</option>
            </StyledInput>
          </Form.Group>
        </Form.Row>

        <Form.Row>
          <Form.Group controlId="goalsX" bssize="large">
            <Form.Label>Goal X</Form.Label>
            <StyledInput
              size="sm"
              required
              type="integer"
              value={goalX}
              onChange={(e) => setGoalX(e.target.value)}
              className="smaller-input"
            />
          </Form.Group>
        </Form.Row>

        <Form.Row>
          <Form.Group controlId="positionX" bssize="large">
            <Form.Label>Position X</Form.Label>
            <StyledInput
              size="sm"
              required
              type="integer"
              className="smaller-input"
              value={posx}
              onChange={(e) => setPosX(e.target.value)}
            />
          </Form.Group>
        </Form.Row>

        <Form.Row>
          <Form.Group controlId="pointsX" bssize="large">
            <Form.Label>Point X</Form.Label>
            <StyledInput
              size="sm"
              required
              type="integer"
              className="smaller-input"
              value={ptx}
              onChange={(e) => setPtX(e.target.value)}
            />
          </Form.Group>
        </Form.Row>

        <Button type="submit">Create</Button>
      </Form>
  );
}

因此，例如，如果我们只想查询利物浦有多少次进球超过 65 个，您可以在上面填写 Goal X Form 并将其他两个留空来创建此有效负载：

{
  "data": [
        {
            "metadata": {
                "type": "TeamXToScoreOverYGoals",
                "team": {
                    "teamId": 10,
                    "name": "Liverpool"
                },
                "yGoals": 65
            }
        }
    ]
}

但是，如果您想要三个（或全部）中的任何两个（或全部），那么您将填写相关表格，metadata 对象将向下移动一级到submetadata。在顶层添加了一个新的“And”type。

这就是利物浦进入前 3 名、进球超过 65 个并获得超过 75 分的有效载荷：

{
    "data": [{
        "metadata": {
            "type": "And",
            "submetadata": [{
                    "type": "TeamXToScoreOverYGoals",
                    "team": {
                        "teamId": 10,
                        "name": "Liverpool"
                    },
                    "yGoals": 65
                },
                {
                    "type": "TeamXToFinishInTopYPosition",
                    "teamX": {
                        "teamId": 10,
                        "name": "Liverpool"
                    },
                    "yPosition": 3
                },
                {
                    "type": "TeamXToGetOverYPoints",
                    "team": {
                        "teamId": 10,
                        "name": "Liverpool"
                    },
                    "yPoints": 75
                }
            ]
        }
    }]
}

我正在努力想象如何通过Form 将它们组合在一起。最好的方法是什么？

Answer 1

您可以根据表单的值构造 JSON。

根据你的问题，你需要构造两个条件或者两种类型的JSON。

1. 仅填充 teamX 和 goalX 时。
2. 当 teamx、goalX 和任何其他填充时。

让我们创建条件并相应地构造 JSON。 你的handleSubmit函数变成了这样，

const handleSubmit = () => {
  let jsonData = {};
  if (!teamX || !goalX) return;

  // When teamX and goalX only filled.
  if (teamX && goalX && !posx && !ptx) {
    jsonData = {
      "data": [{
        "metadata": {
          "type": "TeamXToScoreOverYGoals",
          "team": {
            "teamId": 10,
            "name": teamX
          },
          "yGoals": goalX
        }
      }]
    }
  }
  // When teamx, goalX and any other filled.
  else {
    jsonData = {
      "data": [{
        "metadata": {
          "type": "And",
          "submetadata": [{
              "type": "TeamXToScoreOverYGoals",
              "team": {
                "teamId": 10,
                "name": teamX
              },
              "yGoals": goalX
            },
            {
              "type": "TeamXToFinishInTopYPosition",
              "teamX": {
                "teamId": 10,
                "name": teamX
              },
              "yPosition": posx
            },
            {
              "type": "TeamXToGetOverYPoints",
              "team": {
                "teamId": 10,
                "name": teamX
              },
              "yPoints": ptx
            }
          ]
        }
      }]
    }
  }
}
// post jsonData
alert("submitted");