Question

if / else语句正常工作。我已将控制台日志和调试程序放在条件的两个部分中。当它应该时它击中每一个。但是组件没有被渲染。这是相关的代码。

  handleUsers() {
    this.props.users.map((user, i) => {
      console.log(user, 'User')
      return <User {...user} key={user.name}/>
    })
  }

  handleVideos() {
    this.props.videos.map((video,index) => {
      return <Video videoId={this.handleModalPlay.bind(this)}
                key={index} {...video} />
    })
  }

  render(){
    return(
      <div className='main-body'>
        <div className='cards'>
          {this.props.videos.length === 0
           ? this.handleUsers()
           : this.handleVideos()}
        </div>

以前，在尝试显示其他用户之前，我有这段代码，它将返回并按预期呈现。

 render(){
    return(
      <div className='main-body'>
        <div className='cards'>
          {this.props.videos.map((video,index) => {
            return <Video videoId={this.handleModalPlay.bind(this)}
            key={index} {...video} />
          })}
        </div>

当调试器和控制台日志显示它已进入适当的函数时，我不确定为什么组件停止渲染。

Answer 1

您没有从handleUsers和handleVideos函数返回任何内容。提交一份退货声明

handleUsers() {
    return this.props.users.map((user, i) => {
      console.log(user, 'User')
      return <User {...user} key={user.name}/>
    })
  }

  handleVideos() {
    return this.props.videos.map((video,index) => {
      return <Video videoId={this.handleModalPlay.bind(this)}
                key={index} {...video} />
    })
  }

React不从if else块渲染组件

1 个答案: