Блог

Я борюсь с построением данных для запроса POST через React Form . 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 голов, вы должны заполнить цель X Form выше и оставить две другие пустые, создавая эту полезную нагрузку:

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

Однако, если вам нужны любые две из трех (или все из них), вы должны заполнить соответствующие формы, и metadata объект будет перемещен на один уровень вниз в submetadata . На верхнем уровне добавляется новый «И» 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 . Какой был бы лучший способ сделать это?

Вы можете создать 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 amp;amp; goalX amp;amp; !posx amp;amp; !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");