javascript - 使用函数返回 Prop 不返回 Prop

Question

我正在尝试使用一种方法在 React 组件上定义一个 Prop 。该方法运行良好，我可以向控制台返回正确的结果。但是，当我使用 React 浏览器扩展程序检查我的组件时，我看不到任何 props 分配给该组件，我也不能在组件内使用它们。

class NowPlaying extends Component {

state = {
    genres: []
};

componentDidMount() {
    // Fetch Genre Data
    axios.get(`${base_url}genre/movie/list?api_key=${api_key}`)
        .then(res => this.setState({ genres: res.data.genres }))
}

getGenreTitles = (genreIds, genres) => {
    genreIds.map(genreId => {
        const filteredGenres = genres.filter(genre => genre.id === genreId);
        const { name } = filteredGenres[0];
        return name;
    })
};

render() {
    return this.props.movies.map((movie) => (
       <MovieItem
           key={movie.id}
           movie={movie}
           genres={this.getGenreTitles(movie.genre_ids, this.state.genres)}
       />
    ));
}
}

期望名称作为 prop 返回，然后可以在 movieitem 组件中使用。

Answer 1

getGenreTitles 不返回任何内容。 (相比之下，请注意您传递给 map() 的函数如何具有 return 语句。)从函数声明中删除大括号以利用默认 return对于箭头函数:

getGenreTitles = (genreIds, genres) =>
    genreIds.map(genreId => {
        const filteredGenres = genres.filter(genre => genre.id === genreId);
        const { name } = filteredGenres[0];
        return name;
    });

或者在函数体中加入return语句:

getGenreTitles = (genreIds, genres) => {
    return genreIds.map(genreId => {
        const filteredGenres = genres.filter(genre => genre.id === genreId);
        const { name } = filteredGenres[0];
        return name;
    });
}