Question

这是一个函数，只是将props返回到React中名为box的元素。这个MovieDatabase中的是一个JSON文件，其中包含不同电影的标题。我只想看名字叫《星球大战》的电影。

const showMovies = MovieDatabase.map((movie) =>{
const aa = movie.title.contains("Star Wars")
return (
    <Box movieName = {aa} />
);})

Answer 1

我认为最好与组件分开过滤。

这是一种方法：

// assuming the DB is something like this based on your .map example
const MovieDatabase = [
    { title: 'Star Wars: II', id: 0 },
    { title: 'Star Wars: I', id: 1 },
    { title: 'Star Wars: IV', id: 2 },
    { title: 'Moon', id: 3 }
  ]

// array of star wars movies
const starWars = MovieDatabase.filter(movie => movie.title.includes('Star Wars'))

// component to render movies ( doesn't care about anything but rendering )
const MovieBoxes = movies => movies.map(movie => (
  <Box key={movie.id} movieName={movie.title} />
)

您可以通过将过滤器包装到带有关键字并将其传递给include的函数中来进一步改进它，以便查找任何电影。

Answer 2

您可以使用array.filter()

const array = [{
  title: 'Star Wars',
  duration: 107
}, {
  title: 'Star Wars',
  duration: 103
}, {
  title: 'Lord Of The Rings',
  duration: 500
}]

const filterArray = array.filter(film => film.title === 'Star Wars')

console.log(filterArray)

Answer 3

您还可以在null中返回map()作为过滤器，而无需明确使用Array#filter()，因为React不会渲染

const showMovies = MovieDatabase.map((movie) =>{
    const {title} = movie
    return title.contains("Star Wars") ? <Box movieName = {title} /> : null;
})

如何从标题包含给定单词的json文件中分离所有标题？

3 个答案: