Javascript 重新渲染但不显示正确的组件

我有一个配置文件组件，它应该根据用户点击标记的动作呈现不同的组件。我已经传递了信息，并更新了正确组件的状态。但是，当重新渲染轮廓组件时，它仍然渲染相同的组件，而不是新选择的组件

class Profile extends Component {
  constructor(props){
    super(props);
    this.state = {
      currentComponent: 'sales'
    }

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

  changeComponent(component){
    console.log('You are trying to change component!');
    console.log(this);
    this.setState({currentComponent: component});
  }

  render(){
      let component;
      switch(this.state.currentComponent){
        case 'sales':
          component =  <Sales />;
          break;
        case 'income':
          component = <Income />;
        default:
          component =  <Sales />;
      }
      const menuItems = [
        {
          text: 'Sales'
        },
        {
          text: 'Team'
        },
        {
          text: 'Income'
        },
        {
          text: 'Edit'
        }
      ]
      console.log(this.state);
      return <div id="profileWrap">
        <div id="profileMenu">
          <NavMenu menuItems={menuItems} currentComponent={this.state.currentComponent} changeComponent={this.changeComponent}/>
        </div>
        {component}
      </div>
  }
}

以收入代替销售

正如您所看到的，在Profile组件内部，当我访问该函数时，我正在记录我的工作人员当时认为这是什么，这两者似乎都是正确的，我也在重新渲染时记录状态，这确实显示了正在使用的正确状态。这和我的switch语句有关吗

编辑

将我的switch语句更改为if/elseif语句后，一切正常。为什么开关导致它不更新？

您的开关语句中缺少中断：

  switch(this.state.currentComponent){
    case 'sales':
      component =  <Sales />;
      break;
    case 'income':
      component = <Income />;
      break; // <-- need this here or will fall through to default.
    default:
      component =  <Sales />;
  }

---

然后在render:{this.state.currentComponent}

神圣的摩西……这是一个愚蠢的错误。谢谢你帮我抓住它！5分钟后，我会接受这个答案！更新了我的答案。。可能根本不需要那个switch语句/if-else梯形图。这真是太聪明了，我想知道我该怎么做

  switch(this.state.currentComponent){
    case 'sales':
      component =  <Sales />;
      break;
    case 'income':
      component = <Income />;
      break; // <-- need this here or will fall through to default.
    default:
      component =  <Sales />;
  }

 this.state = { currentComponent: <Sales /> }

 ...

 const menuItems = [
    {
      text: 'Sales'
      component: <Sales />
    },
    ...
  ]