React props объединяются при передаче вниз

Question

У меня есть довольно глубокий вложенный компонент реакции, где я хочу использовать опору, чтобы получить доступ к опоре movie Мне нужно пройти через вложенный беспорядок:

const removeMovieFromDashboard = (movie) => {

  const removeMovieFromList = async (movie) => {
    const value = await localforage.getItem<any []>('trackedMovies');
    value.forEach((item, index) => {
      console.log(item.id === movie.movie.movie.movie.id)
      if (item.id === movie.movie.movie.movie.id) {
        value.splice(index, 1);
        localforage.setItem('trackedMovies', value)
      }
    })
  }

  return (
    <div onClick={() => removeMovieFromList(movie)}>Remove movie</div>
  )
}

Как видите, мне нужно пройти 3 объекта mov ie, чтобы перейти к идентификатору movie.movie.movie.movie.id. Я почти уверен, что React умнее этого, поэтому я делаю что-то не так.

Это структура, которую я использую:

MovieOverview получает массив фильмов через MovieContext и сопоставляет каждый mov ie, создает дочерний компонент:

let [movies, setMovies] = useContext(MovieContext)

return (
  <ul>
    { movies ? movies.map(movie => (
      <MovieOnDashboard movie={movie}/>
    )) : null}
  </ul>
)

MovieOnDashboard принимает переданную опору и отображает компонент OverlayEL, который также принимает опору.

const OverlayEl = (props) => {
  return (
    <Overlay>
      <RemoveMovieFromDashboard movie={props}/>
    </Overlay>
  )
}

const MovieOnDashboard = (movie) => {

  const imagePath = 'https://image.tmdb.org/t/p/w185/'
  const [isHover, setHover] = useState(false);

  return (
    <MovieContainer 
      key={movie.movie.id}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}>
        <img src={imagePath + movie.movie.poster_path} alt='poster' />
      { isHover && <OverlayEl movie={movie} />}      
    </MovieContainer>
  )
}

OverlayEl отображает другой компонент RemoveMovieFromDashboard, с которого я начал публикацию. Так что свойство movie передается довольно много раз.

Есть ли способ не складывать / объединять свойства, когда я передаю их вниз по дереву компонентов?

Answer 1

Функциональный компонент получает в качестве аргумента объект props, а не mov ie.

В MovieOnDashboard вы вызываете свой объект props (который будет содержать ключ movie) movie. Вот почему вам нужно делать такие вещи, как movie.movie.

И когда вы вызываете <OverlayEl movie={movie} />, movie будет не mov ie, а объектом props, содержащим ваш mov ie. Вот почему ваши вложенные дочерние элементы должны выполнять movie.movie.movie....

Вы можете перераспределить свой код следующим образом:

const MovieOnDashboard = ({ movie }) => { // we deconstruct the props to extract the movie

  const imagePath = 'https://image.tmdb.org/t/p/w185/'
  const [isHover, setHover] = useState(false);

  return (
    <MovieContainer 
      key={movie.id}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}>
        <img src={imagePath + movie.poster_path} alt='poster' />
      { isHover && <OverlayEl movie={movie} />}      
    </MovieContainer>
  )
}

Не забудьте обновить все свои компоненты.