ReactJS - 当子道具通过变量渲染时，子道具不会更新

Question

我的目标是通过this.state.currentpage渲染不同的组件。一切都按预期工作，除非我需要更新渲染组件的 props。这是一个问题，因为teamList一直在变化。我已使用当前更改更新了teamList，但我无法接收存储在this.state.currentpage中的组件中的更改。

class ManagerTeam extends Component {
constructor(props) {
super(props)
this.initComponent = this.initComponent.bind(this)
this.showTeamMembros = this.showTeamMembros.bind(this)
this.showTeamReport = this.showTeamReport.bind(this)
this.showTeamTarefas = this.showTeamTarefas.bind(this)
this.showVisaoGeral = this.showVisaoGeral.bind(this)
this.updateData = this.updateData.bind(this)
this.initComponent()
}
initComponent() {
this.updateData(this.props)
this.state = {
currentpage: <ManagerTeamVisaoGeral teamList={this.teamList}/>
}
}
updateData(props) {
this.teamList = props.userTeams.list
}
showTeamMembros() {
this.setState({
currentpage: <ManagerTeamMembros/>
})
}
showTeamReport() {
this.setState({
currentpage: <ManagerTeamReport/>
})
}
showTeamTarefas() {
this.setState({
currentpage: <ManagerTeamTarefas/>
})
}
showVisaoGeral() {
this.setState({
currentpage: <ManagerTeamVisaoGeral teamList={this.teamList}/>
})
}
componentWillReceiveProps(nextProps) {
this.updateData(nextProps)
}
render() {
return (
<div>
<SimpleNavBar user={this.props.user} updateArtifacts={this.props.updateArtifacts} updateManagerTeams={this.props.updateManagerTeams}/>
<NavBar navBarTitle='Equipas' menuOptions={['Visão Geral', 'Membros', 'Tarefas', 'Report']} loadOptions={[this.showVisaoGeral, this.showTeamMembros, this.showTeamTarefas, this.showTeamReport]}/>
<Sidebar activePage="team" isManager={true}/>
{this.state.currentpage}
</div>
)
}
}

Answer 1

状态变量渲染的组件的 props 不会更新，因为变量不会在每次渲染时更新，而是仅在调用 setState 时更新，

相反，您应该有条件地呈现页面或使用路由器。 您也可以简单地拥有处理程序，并将需要它作为参数活动的页面传递给它

使用条件渲染，您的代码将如下所示

class ManagerTeam extends Component {
constructor(props) {
super(props)
this.initComponent = this.initComponent.bind(this)
this.showPage = this.showPage.bind(this)
this.initComponent()
}
initComponent() {
this.updateData(this.props)
this.state = {
currentpage: <ManagerTeamVisaoGeral teamList={this.teamList}/>
}
}
updateData(props) {
this.teamList = props.userTeams.list
}
showPage(page) {
this.setState({
currentpage: page
})
}

componentWillReceiveProps(nextProps) {
this.updateData(nextProps)
}
render() {
return (
<div>
<SimpleNavBar user={this.props.user} updateArtifacts={this.props.updateArtifacts} updateManagerTeams={this.props.updateManagerTeams}/>
<NavBar navBarTitle='Equipas' menuOptions={['Visão Geral', 'Membros', 'Tarefas', 'Report']} loadOptions={[this.showVisaoGeral, this.showTeamMembros, this.showTeamTarefas, this.showTeamReport]}/>
<Sidebar activePage="team" isManager={true}/>
{this.state.currentpage === 'Visão Geral' && <ManagerTeamVisaoGeral teamList={this.teamList}/>}
{this.state.currentpage === 'Membros' && <ManagerTeamMembros/>}
{this.state.currentpage === 'Tarefas' && <ManagerTeamTarefas/>}
{this.state.currentpage === 'Report' && <ManagerTeamReport/>}
</div>
)
}
}

Answer 2

这是因为即使您正在更新列表，但您的组件也不会再次呈现。因此，最好将您的teamList设置为state variable，并在更新列表时执行this.setState，还有一件事是尝试在componentWillReceiveProps中设置if条件，如下所示：

componentWillReceiveProps(nextProps) {
if(this.state.teamList !== nextProps.userTeams.list){
// update will be called only when you have new list
this.updateData(nextProps)
}
}