ReactJS - 通过变量呈现子时，子道具不会更新

Question

我的目标是通过this.state.currentpage渲染不同的组件。一切都按预期工作，除非我需要更新渲染组件的道具。这是一个问题，因为 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

您对 state 变量渲染的组件的 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)
  }
 }