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块-这是因为，如果您从相应的return块中if，则没有必要。

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

3 个答案: