添加新输入时，如何更新组件

Question

我有一个反应组件，用户可以在其中添加团队，然后向这些团队添加玩家。我使用react fetch发布并从数据库中获取数据。我的问题是，如何自动更新组件以显示用户新添加的团队？目前我必须手动刷新才能看到更改。 我是否必须在按钮上添加另一个函数onClick以刷新整个页面，或者是否有更好的方法来响应只是刷新组件？

我的渲染看起来像这样：

render() {
    return (
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            <div class="jumbotron text-center">
            <form>
              <label for="teamName">Team name</label>
              <input type="text" class="form-control" id="teamName"></input>
              <button type="submit" onClick={this.addTeams} class="btn btn-primary">Submit</button>
            </form>
            <br></br>
            Registered teams:
            <br></br>
            {
              this.state.data.map((dynamicData, key) =>
              <div class="black" id="panels">
              <PanelGroup accordion id="accordion"
              activeKey={this.state.activeKey}
              onSelect={this.handleSelect}>
                <Panel bsStyle="primary" eventKey={dynamicData.id}>
                  <Panel.Heading>
                    <Panel.Title toggle onClick={() => this.showPlayers(key)}>{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="text" class="bottomroom" placeholder="Player name" id={"playerName"+key}></input>
                    <input type="text" class="bottomroom" placeholder="Player number" id={"pnr"+key}></input>
                    <input type="hidden" class="bottomroom" id={"teamId"+key} value={dynamicData.id}></input>
                    {this.state.players.map((playersData, key) =>
                      <p>{playersData.name}</p>
                    )}
                  </div>
                    <br></br>
                    <button type="submit" onClick={() => this.addPlayers(key)} class="btn btn-success button"><i class="fas fa-check-circle"></i></button>
                  </Panel.Body>
                </Panel>
              </PanelGroup>
              </div>
              )
            }
            </div>
          </div>
        </div>
      </div>
    );
  }