Реагировать на условный рендеринг

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

Полагаю, вам нужна логика 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>

Answer 2

В вашем коде есть проблема: вы проверяете 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 3

Вы можете использовать то, что мы называем 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, то компонент будет после его визуализации, в противном случае он будет игнорироваться

Answer 4

Есть много способов сделать это, этот пример показывает, как сделать это с помощью троичного. Я думаю, что этот код выглядит лучше и меньше, но вы также можете использовать ответ Юрия Тарабанко, который делает то же самое

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>

    );
  }
}