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

状态变量渲染的组件的道具不会更新，因为变量不会在每次渲染时更新，而是仅在您调用 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)
  }
 }

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

ReactJS - Child props are not updating when child is rendered through a variable

components

react-props