代码之家 › 专栏 › 技术社区 › Cuzto

尝试用输入数据发送Id时出现React fetch错误

fetch get api reactjs json

Cuzto · 技术社区 · 7 年前

在尝试将数据发送到数据库时,我遇到了一个关于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);
 }

如果我硬编码球员姓名和号码,或者硬编码teamID,这一切都会起作用。当尝试动态获取所有3个时,它不起作用。控制台。log只返回球队ID,当试图向其他球队添加球员时,该ID也不会更新。

反应渲染部分:

  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

1 回复 | 直到 7 年前

Indrajeet Latthe 7 年前

通过查看错误,很明显字段的类型不匹配。

我假设数字字段是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);
 }