反应错误：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

Question

编辑：[由社区解决 - 在答案中！] 谢谢大家

我正在尝试将搜索功能添加到我的 webApp（我拥有的电影列表）。为此，我在应用程序中调用了一个功能组件 (MovieListFiltered)，该组件具有以下代码：

MovieListFiltered.js：

import React from 'react'

const MovieListFiltered = (props) => {
    const newData = props.moviesAfterFilter
    if(newData !== null) {
        const newMovies = newData.map((movie, i) =>
        {
            return(
                <div className="col s12 m3 l3" key={i} movieid ={movie.idFromTmdb}>
                    <div className="card">
                        <div className="card-image waves-effect waves-block waves-light">
                            <img src={movie.url2poster} alt={movie.movieTitle} className="responsive-img" />
                            <p className="littleFont" align="center"><span><b>{movie.movieTitle}</b></span></p>
                        </div>
                        <div className="card-action">
                            <a href="#" onClick={() => this.props.viewMovieInfo(movie.idFromTmdb)}>Movie Details</a>
                        </div>
                    </div>
                </div>
            );
        })
        console.log(newMovies)
        props.movieCallback(newData, newMovies);
    } else {
        return null
    }
}

export default MovieListFiltered

因此，基本上，那里并没有什么特别之处：您会看到许多 console.log 调用，这只是为了确保传递了正确的数据数组（确实如此！）

在 App.js 中：

... code not interesting goes here ...

  callbackFromList = (childDataData, childDataMovies) => {
    this.setState({moviesToFilter: childDataData});
    this.setState({moviesToShow: childDataMovies});
    this.setState({totalResults: childDataData.length});

  }



render()
{
... some not interesting code goes here...

      return(
<div className="App">
    <Nav />
    <div>
        <div className="container">
            <div className="row">
                <div className="col s10 offset-s1">
                    <MovieListFiltered viewMovieInfo={this.viewMovieInfo} movieCallback={() => this.callbackFromList} ref={this.movieListRef} moviesAfterFilter={this.state.moviesFiltered}></MovieListFiltered>
                </div>
            </div>
        </div>
    </div>
</div>
      );

}

你能帮帮我吗？我已经阅读了关于 stackoverflow 的所有问题，但似乎没有什么适合我的情况。

Answer 1

我想你想要这样的东西：

const MovieListFiltered = (props) => {
    const newData = props.moviesAfterFilter
    if(newData !== null) {
        const newMovies = newData.map((movie, i) => (                            
            <div className="col s12 m3 l3" key={i} movieid ={movie.idFromTmdb}>
                <div className="card">
                    <div className="card-image waves-effect waves-block waves-light">
                        <img src={movie.url2poster} alt={movie.movieTitle} 
                        className="responsive-img" />
                        <p className="littleFont" align="center"><span><b> 
                       {movie.movieTitle}</b></span></p>
                    </div>
                    <div className="card-action">
                        <a href="#" onClick={() => 
                       this.props.viewMovieInfo(movie.idFromTmdb)}>Movie Details</a>
                    </div>
                </div>
            </div>
            );
        )            
        console.log(newMovies)
        props.movieCallback(newData, newMovies)
        return newMovies
    } else {
        return null
    }
}

Answer 2

这里是一个更简洁的版本，只有一次返回。不过，这可能不是您想要的。

import React from 'react'

const MovieListFiltered = (props) => {
    const newData = props.moviesAfterFilter || []; // add 'or' if null or undefined
    const newMovies = newData.map((movie, i) => (
        <div className="col s12 m3 l3" key={i} movieid ={movie.idFromTmdb}>
            <div className="card">
                <div className="card-image waves-effect waves-block waves-light">
                    <img src={movie.url2poster} alt={movie.movieTitle} className="responsive-img" />
                    <p className="littleFont" align="center"><span><b>{movie.movieTitle}</b></span></p>
                </div>
                <div className="card-action">
                    <a href="#" onClick={() => this.props.viewMovieInfo(movie.idFromTmdb)}>Movie Details</a>
                </div>
            </div>
        </div>
    ));
    console.log(newMovies)
    props.movieCallback(newData, newMovies);

    return newMovies;
}

export default MovieListFiltered

Answer 3

您只是从else 块返回一个值。 if 块当前未返回任何内容。您可能希望将if 块的最后一行设为return newMovies;

import React from 'react'

const MovieListFiltered = (props) => {
    const newData = props.moviesAfterFilter
    if(newData !== null) {
        const newMovies = newData.map((movie, i) =>
        {
            return(
                <div className="col s12 m3 l3" key={i} movieid ={movie.idFromTmdb}>
                    <div className="card">
                        <div className="card-image waves-effect waves-block waves-light">
                            <img src={movie.url2poster} alt={movie.movieTitle} className="responsive-img" />
                            <p className="littleFont" align="center"><span><b>{movie.movieTitle}</b></span></p>
                        </div>
                        <div className="card-action">
                            <a href="#" onClick={() => this.props.viewMovieInfo(movie.idFromTmdb)}>Movie Details</a>
                        </div>
                    </div>
                </div>
            );
        });
        console.log(newMovies);
        props.movieCallback(newData, newMovies);

        return newMovies;
    }

    return null;

}

export default MovieListFiltered

另外，您可能会注意到我删除了整个 else 块 - 这是因为如果您从相应的 if 块中 return 则没有必要。