Javascript Onsen选项卡在一个选项卡中的状态更改后未正确更新

下面是一个带有三个选项卡的选项卡栏的简单示例。在第二个方面，我使用状态变量在渲染时在两个组件之间切换。 如果我在三个选项卡之间浏览，一切看起来都正常。但是，一旦我切换了第二个选项卡中的组件（首先单击浮动按钮，然后单击后退按钮），选项卡栏就无法正常工作。如果我这样做并返回到第1页，它看起来就像是导航到第1页，但它仍然显示第2页的内容。如果我切换到第3页，它就可以了。 此外，如果我在第2页进行切换，请转到第1页，然后在页面之间来回单击一点，它将再次开始工作

当我从一个页面转到索引更高的页面时，它似乎开始工作（这就是为什么直接转到第3页时它工作的原因）

我是做错了什么，还是这是Onsen UI中的一个bug

以下是示例代码（我使用的是Meteor、React和Onsen UI）：

import React，{Component}来自'React'；
导入“onsenui/css/onsenui.css”；
导入“onsenui/css/onsen css components.css”；
从“onsenui”导入ons；
从“react onsenui”导入{Page，Tabbar，Tab，Toolbar，Fab，BackButton，Icon}；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={index:0}；
}
renderTabs（）{
返回[
{
内容：，
选项卡：
},
{
内容：，
选项卡：
},
{
内容：，
选项卡：
}
];
}
render（）{
返回(
{
if（event.index！=this.state.index）{
this.setState（{index:event.index}）；
}
}
}
renderTabs={（）=>this.renderTabs（）}
/>
);
}
}
类Page1扩展组件{
render（）{
返回(
第1页
);
}
}
类Page2扩展组件{
构造函数（）{
超级（）；
this.state={showTest:false}；
}
showTest（show）{
this.setState（{showTest:show}）；
}
render（）{
返回(
这是“州”吗？
this.showTest（show）}/>
:
this.showTest（show）}/>
);
}
}
类Show1扩展了组件{
renderToolbar（）{
返回(
显示1
);
}
renderFixed（）{
返回(
this.props.showTest（true）}>
);
}
render（）{
返回(
this.renderFixed（）}>Show 1
);
}
}
类Show2扩展了组件{
renderToolbar（）{
返回(
this.props.showTest（false）}>返回
表演2
);
}
render（）{
返回(
this.renderToolbar（）}>Show 2
);
}
}
类Page3扩展组件{
render（）{
返回(
第3页
);
}
}

我想你做的一切都很好。可能是很久以前的一只虫子

---

使用OnsenUI 2.10.10和React 16.4.2，您的代码现在似乎可以工作了。当我在页面之间来回切换，当我在第2页上更改状态时，甚至当我使用“后退”按钮时，效果都很好。

IMHO您所做的一切都很好。可能是很久以前的一只虫子

使用OnsenUI 2.10.10和React 16.4.2，您的代码现在似乎可以工作了。当我在页面之间来回切换，当我在第2页上更改状态时，甚至当我使用“后退”按钮时，效果都很好

import React, { Component } from 'react';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
import ons from 'onsenui';
import {Page,Tabbar, Tab,Toolbar, Fab, BackButton, Icon} from 'react-onsenui';

export default class App extends Component {
  constructor() {
    super();
    this.state = {index: 0};
  }

  renderTabs() {
    return [
      {
        content: <Page1 key="t1"/>,
        tab: <Tab label='Page1' key="b1" />
      },
      {
        content: <Page2 key="t2"/>,
        tab: <Tab label='Page 2' key="b2" />
      },
      {
        content: <Page3 key="t3"/>,
        tab: <Tab label='Page 3' key="b3" />
      }
    ];
  }

  render() {
    return(
      <Tabbar
        index={this.state.index}
        onPreChange={(event) =>
          {
            if (event.index != this.state.index) {
              this.setState({index: event.index});
            }
          }
        }
        renderTabs={() => this.renderTabs()}
        />
    );
  }
}

class Page1 extends Component {
  render() {
    return (
      <Page>
        <div>Page 1</div>
      </Page>
    );
  }
}

class Page2 extends Component {
  constructor() {
    super();
    this.state = { showTest: false};
  }

  showTest(show) {
    this.setState({showTest: show});
  }

  render() {
    return (
      this.state.showTest ?
      <Show2 showTest={(show) =>this.showTest(show)} />
      :
      <Show1 showTest={(show) =>this.showTest(show)} />
    );
  }
}

class Show1 extends Component {
  renderToolbar() {
    return (
      <Toolbar>
        <div className='center'>Show 1</div>
      </Toolbar>
    );
  }
  renderFixed() {
    return(
      <Fab position="bottom right" onClick={() => this.props.showTest(true)}><Icon icon='md-plus'/></Fab>
    );
  }
  render() {
    return (
      <Page renderToolbar={this.renderToolbar} renderFixed={() => this.renderFixed()}>Show 1</Page>
    );
  }
}

class Show2 extends Component {
  renderToolbar() {
    return (
      <Toolbar>
        <div className='left'><BackButton onClick={() => this.props.showTest(false)}>Back</BackButton></div>
        <div className='center'>Show 2</div>
      </Toolbar>
    );
  }
  render() {
    return (
      <Page renderToolbar={() => this.renderToolbar()}>Show 2</Page>
    );
  }
}

class Page3 extends Component {
  render() {
    return (
      <Page>
        <div>Page 3</div>
      </Page>
    );
  }
}