Question

我试图找出React中的条件渲染。如果用户的监视列表中没有电影，我只想输出一个标题。我以为这样的事情会起作用：

render() {
    return (
        <Container>
            {this.state.watchlist.map(item => {
                if(this.state.watchlist.length > 0) {
                    return (
                        <WatchlistMovie
                            className="watchlist-movie"
                            key={item.id}
                            id={item.id}
                            title={item.title}
                            poster={item.poster}
                            overview={item.overview}
                            rating={item.rating}
                            user={this.props.user}
                        />
                    );
                } else {
                    return <h1>no movies</h1>
                }
            )}}
        </Container>
    );
}

Answer 1

我相信您希望-o exec之外的if-else逻辑

map

Answer 2

您可以在React中使用我们称为short circuit的评估进行条件渲染。

render() {
return (
  <Container>

    {this.state.watchlist.length > 0 && (this.state.watchlist.map(item => {
      <WatchlistMovie
        className="watchlist-movie"
        key={item.id}
        id={item.id}
        title={item.title}
        poster={item.poster}
        overview={item.overview}
        rating={item.rating}
        user={this.props.user}
      />)}
    {this.state.watchlist.length === 0 && (
       <h1>no movies</h1>)
     }
  </Container>

);
}
}

在这种类型的表达式中，如果第一个条件为true，则组件将在呈现之后否则将被忽略

Answer 3

您的代码中有一个问题，就是您在this.state.watchlist.length > 0内检查this.state.watchlist.map，并且当h1等于时要显示length元素0。
问题是map()函数遍历数组的所有元素，如果数组为空，则不执行回调。

因此，在您的情况下，当this.state.watchlist.length等于0时，您甚至都没有输入map()函数，因此无法渲染h1元素。

根据许多用户的建议，您应该更改渲染方法：

render() {
    const movieCounter = this.state.watchlist.length;
    return (
        <Container>
            {movieCounter === 0
                ? <h1>no movies</h1>
                : this.state.watchlist.map(item =>
                    <WatchlistMovie
                        className="watchlist-movie"
                        key={item.id}
                        id={item.id}
                        title={item.title}
                        poster={item.poster}
                        overview={item.overview}
                        rating={item.rating}
                        user={this.props.user}
                    />
                )}
            }
        </Container>
    );
}

在此示例中，所发生的是检查movieCounter是否等于0：在这种情况下，显示h1元素，否则遍历所有电影并为它们每个显示一个WatchlistMovie组件。

Answer 4

有很多方法可以执行此操作，此示例显示了如何使用三元操作。我认为这是一个更好看，更小的代码，但是您也可以使用Yury Tarabanko的答案

render() {
    return (
      <Container>
        {this.state.watchlist.length > 0 ?
            this.state.watchlist.map(item => 
                <WatchlistMovie
                    className="watchlist-movie"
                    key={item.id}
                    id={item.id}
                    title={item.title}
                    poster={item.poster}
                    overview={item.overview}
                    rating={item.rating}
                    user={this.props.user}
                />
            })
            :
            <h1>no movies</h1>            
        }
      </Container>

    );
  }
}

反应条件渲染

4 个答案: