我相信你想要if-else外面的逻辑map

  <Container>
    {this.state.watchlist.length === 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>

你可以short circuit在 React 中使用我们所谓的条件渲染评估。

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则组件将在渲染之后，否则将被忽略

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

因此，在您的情况下， whenthis.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为每个电影显示一个组件。

有很多方法可以做到这一点，这个例子展示了如何使用三元来做到这一点。我认为这是一个更好看和更小的代码，但你也可以使用 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>

    );
  }
}