[英]React re-rendering but not displaying correct component
I have a Profile
component that should render different components depending on user action (a click of an a tag). 我有一个Profile
组件,该组件应根据用户操作(单击标记)来呈现不同的组件。 I have the information being passed and the correct component's state being updated. 我正在传递信息,并且正在更新正确的组件状态。 However, when the Profile
component is re-rendered, it still rendered the same component, not the newly selected one. 但是,当重新渲染Profile
组件时,它仍然渲染相同的组件,而不是新选择的组件。
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>
}
}
And my Sales
/ Income
components are just 我的Sales
/ Income
部分只是
import React, {Component} from 'react';
import {Link} from 'react-router';
class Sales extends Component {
render(){
return(<h1>This is Sales!</h1>)
}
}
export default Sales;
with Income
in place of Sales
. 用Income
代替Sales
。
As you can see, inside of the Profile
component, I am logging when I access that function along with what my worker thinks this
is at that moment in time (both of which seem correct) and I am also logging the state out on re-render, which does show the correct state being used. 如您所见,在Profile
组件内部,当我访问该函数时,我正在记录日志,而我的工作人员当时认为this
是正确的(两者似乎都是正确的),并且我还在重新登录时注销了该状态。渲染,它确实显示正在使用的正确状态。 Is it something with my switch statement? 我的switch语句有问题吗?
Edit 编辑
After changing my switch statement to if/elseif
statements, it all works. 将我的switch语句更改为if/elseif
语句后,所有方法都可以工作。 Why is it that the switch
causes it not to update? 为什么switch
导致它不更新?
You're missing break
in your switch statement: 您在switch语句中缺少break
:
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 />;
}
Update: You can also avoid this whole thing by adding the components to your menuItems
array. 更新:您还可以通过将组件添加到menuItems
数组来避免整个事情。
this.state = { currentComponent: <Sales /> }
...
const menuItems = [
{
text: 'Sales'
component: <Sales />
},
...
]
Then in render: { this.state.currentComponent }
然后在渲染中: { this.state.currentComponent }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.