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

Posted 2023-02-27

【中文标题】如果填充了表单，则在 React 中构造 POST Json

【英文标题】：Construct POST Json in React If Form Is Populated

【发布时间】：2021-01-01 09:31:23

【问题描述】：

我正在努力通过 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 将它们组合在一起。最好的方法是什么？

【参考方案1】：

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

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

仅填充 teamX 和 goalX 时。 当 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");