Question

我正在建立一个游戏，我希望玩家能够添加两个或多达四个玩家。每个玩家都有一个名字和一个角色。

到目前为止，这个课程看起来像这样：

class UserForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      warnings: {},
      error: null,
      success: null,
      name: "",
      piece: "",
    };

    this.submitRequest = this.submitRequest.bind(this);
  }

  submitRequest(event) {
    event.preventDefault();
    var content = {
      name: this.state.name,
      piece: this.state.piece
    };

    createUser(content)
      .then(() => {
        return this.setState({
          success: "User Added!",
          error: null,
          warnings: {}
        });
      })
      .catch(err => {
        return this.setState({
          error: err.message || "An unexpected error occurred",
          warnings: {}
        });
      });
  }

  addUser(stateName, e,playerNumber) {
    this.setState({
      [stateName]: e.target.value,
      [playerNumber]:playerNumber
    });
  }

  render() {

    var inputFields = (
      < div >
        <label>
          Name:
            <input type="text" onChange={e => this.addUser("name", e)} />
        </label>
        <br />
        <label>
          Piece:
            <input type="text" onChange={e => this.addUser("piece", e)} />
        </label>
      </div >
    );
    return (
      <div>
        <form onSubmit={this.submitRequest}>
          <label>
            Player 1
          </label>
          <br />
          {inputFields}
          Player 2
          <br />
          {inputFields}
          Player 3
          <br />
          {inputFields}
          Player 4
          <br />
          {inputFields}
          <input type="submit" value="Submit" />
        </form>
        <div className="alert alert-danger mt-2" role="alert">
          {this.state.error}
          {this.state.success}
        </div>
      </div >
    );
  }
}
export default UserForm;

我希望在按下一个提交按钮时将所有玩家添加到我的数据库中。但是在每种情况下数据基本相同。通过使用for循环等一段时间我一直在摆弄它，但它似乎不太正确。感谢任何帮助！谢谢，

Answer 1

第一件事

您只从输入字段向addUser函数传递两个参数I.e，name，event但在addUser中您尝试访问三个参数

 addUser(stateName, e,playerNumber) //this is wrong
 addUser(stateName, e) //this is correct

然后如你所说，你想在一个提交中提交所有玩家信息，在这种情况下你需要三个状态

 this.state= {
 name:””,
 piece:””,
 userData: []
 }

因此，每当调用addUser时，将播放器信息推送到状态数组，最后在提交表单时发送该数组。您可以在构建查询时在后端迭代播放器列表信息。

此外，当您为名称和片段状态指定值时，您必须将这些状态作为值传递给输入字段，否则您将无法获得值

 <input type=“text” value={this.state.name} onChange={e => this.addUser(“name”, e)} />

一次发出多个帖子请求？

1 个答案: