尝试使用输入数据发送 Id 时反应获取错误

Question

在尝试将数据发送到我的数据库时，我对 react fetch 有一点问题。

我有一份球队名单，我想将球员添加到某些球队。我正在尝试从用户输入中发送球员姓名和球员编号，以及他们将球员添加到的特定球队的球队 ID。这是我添加玩家的功能：

  addPlayers() {
    var pname = document.getElementById("playerName").value;
    var pnr = document.getElementById('pnr').value;
    var teamId = document.getElementById('teamId').value;
    console.log(pname + pnr + teamId);
    fetch("http://localhost:8080/api/addPlayer?name="+pname+"&number="+pnr+"&teamId="+teamId);
 }

如果我硬编码球员姓名和号码或硬编码球队 ID，这一切都有效。当尝试动态获取所有 3 个时，它不起作用。 console.log 仅返回团队 ID，并且在尝试将玩家添加到其他团队时也不会更新。

React 渲染部分：

  this.state.data.map((dynamicData, key) =>
              <div class="black">
              <PanelGroup accordion id="accordion">
                <Panel bsStyle="primary" eventKey="1">
                  <Panel.Heading>
                    <Panel.Title toggle>{dynamicData.name} <i class="fas fa-angle-down"></i></Panel.Title>
                  </Panel.Heading>
                  <Panel.Body collapsible>Add players</Panel.Body>
                  <Panel.Body collapsible>
                  <div id="dynamicInput">
                    <input type="hidden" class="bottomroom" id="teamId" value={dynamicData.id}></input>
                    <input type="text" class="bottomroom" placeholder="Player name" id="playerName"></input>
                    <input type="text" class="bottomroom" placeholder="Player number" id="pnr"></input>
                  </div>
                    <br></br>
                    <button type="submit" onClick={this.addPlayers} class="btn btn-success button"><i class="fas fa-check-circle"></i></button>
                  </Panel.Body>
                </Panel>
              </PanelGroup>

Here is a picture of what it looks like to give you a better understanding

---

错误：

"Bad Request"
message
:
"Failed to convert value of type 'java.lang.String' to required type 'int'; nested exception is java.lang.NumberFormatException: For input string: """
path
:
"/api/addPlayer"
status
:
400
timestamp

Answer 1

通过查看错误，很明显该字段存在类型不匹配。

我会假设 number 字段是 int 类型，你可以尝试跟随，或者如果它是 int 类型的 teamid，只需为 teamid 执行此操作

var pnr = parseInt(document.getElementById('pnr').value);

告诉我们它是否有效。

更新

<input type="text" class="bottomroom" placeholder="Player name" id={"playerName"+key}></input>
<input type="text" class="bottomroom" placeholder="Player number" id={"pnr"+key}></input>

按钮

 <button type="submit" onClick={() => this.addPlayers(key)} class="btn btn-success button"><i class="fas fa-check-circle"></i></button>

在函数中

   addPlayers(key) {
    var pname = document.getElementById("playerName").value;
     var pnr = parseInt(document.getElementById('pnr').value);
    var teamId = document.getElementById('teamId').value;
    console.log(pname + pnr + teamId);
    fetch("http://localhost:8080/api/addPlayer?name="+pname+"&number="+pnr+"&teamId="+teamId);
 }