Question

我目前遇到了问题。我使用ReactJs和Ajax，但问题是在同一页面上我有4个标签。每个标签都是一个页面。总结一下，我有一个重要的页面4。除了在其中一个标签中，我必须删除一张信用卡，所以一旦我选择了卡片，我点击删除按钮，我希望它刷新我的标签，但他raffrachi主页面和我的标签n'更开放。所以我想放置一个location.reload（），但它刷新了整个页面，并没有解决我的问题，因为活动标签关闭。我给你代码和一些图片以供理解。

刷新前： enter image description here

刷新后： enter image description here

虽然我希望它只刷新标签“付款方式”这里是我的代码：

handleCardDelete = () => {
var numCard = $('input[name=rbCard]:checked').val();
console.log(this.state.token);
 $.ajax({
    url: 'http://API.....,

    dataType: 'json',

    type: 'DELETE',

    headers: {
        'Authorization' : 'Bearer ' + this.state.token
    },

    complete: function(){
        alert("carte supprimée avec succès");
        window.location.reload();
    },

});

};

我的ReactJs标签：

<Button animated='fade' onClick={this.handleAddCardSubmit}>
        <Button.Content visible>
            Ajouter une carte
        </Button.Content>
        <Button.Content hidden>
            <Icon name='add' />
        </Button.Content>
    </Button>

    <Button animated='fade' onClick={this.handleCardDelete}>
        <Button.Content visible>
            Supprimer la carte
        </Button.Content>
        <Button.Content hidden>
            <Icon name='delete' />
        </Button.Content>

My ReactJs“Home”页面：

handleItemClick = (e, { name }) => {
    this.setState({activeItem: name});
    if(name === 'Profil'){
      this.setState({fluxActif: <MonProfil/>});
    }
    if(name === 'MoyenDePaiement'){
          this.setState({fluxActif: <MoyenDePaiement/>});
      }
  };
  componentWillMount(){
    const token = localStorage.token;
    this.setState({token});

  };
  render() {

    return (
      <div>
        <Menu className="MonCompteMenu">
          <h2>Mon Compte</h2>
        </Menu>
        <Grid>
          <Grid.Column width={3}>
            <Menu fluid vertical tabular>
              <Menu.Item  name='Profil' active={this.state.activeItem === 'Profil'} onClick={this.handleItemClick} ><p>Mon Profil</p>
              </Menu.Item>
              <Menu.Item  name='MoyenDePaiement' active={this.state.activeItem === 'MoyenDePaiement'} onClick={this.handleItemClick} ><p id="MoyenDePaiement">Moyen de paiement</p>
              </Menu.Item>
            </Menu>
          </Grid.Column>

          <Grid.Column stretched width={13}>
            <Segment >
              {this.state.fluxActif}
            </Segment>
          </Grid.Column>
        </Grid>
      </div>
    )
  }
}

我继续我的研究。我提前谢谢你。

Answer 1

你不应该像这样两次使用setState（）!!并且不要将组件放入状态！像这样重构你的代码，也许会解决你的问题

handleItemClick = (e, { name }) => {
    const { activeItem } = this.state;
    if(activeItem === name) return;
    this.setState({activeItem: name, });
  };

render() {
   const { activeItem } = this.state
   const ActiveTab = activeItem === 'Profil' ? MonProfil : MoyenDePaiement
   return (
      ......
       <Segment >
          <ActiveTab />
        </Segment>

   )
}

刷新选项卡而不是ReactJs Ajax页面

1 个答案: