Question

我正在尝试使用一种方法在react组件上定义prop。该方法工作正常，我可以将正确的结果返回到控制台。但是，当我用react浏览器扩展程序检查组件时，看不到没有分配给组件的道具，也无法在组件中使用它们。

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)}
       />
    ));
}
}

期望的是，该名称作为道具返回，然后可以在movieitem组件中使用。

Answer 1

getGenreTitles不返回任何内容。（通过对比，请注意传递给map()的函数如何具有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;
    });
}

使用函数返回道具不会返回道具

1 个答案: