传递时 React 道具是连接的答案

【问题标题】：React props are concatenating when being passed down传递时 React 道具是连接的
【发布时间】：2020-08-01 12:43:56
【问题描述】：

我有一个相当深的嵌套反应组件，我想在其中使用道具，要访问道具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 个电影对象才能到达 id movie.movie.movie.movie.id。我很确定 React 比这更聪明，所以我做错了。

这是我正在使用的结构：

MovieOverview 通过 MovieContext 接收电影数组，并通过每个电影映射创建一个子组件：

let [movies, setMovies] = useContext(MovieContext)

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

MovieOnDashboard 接受传递下来的 prop 并呈现一个 OverlayEL 组件，该组件也接受该 prop。

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 属性被传递了很多次。

当我将 props 向下传递到组件树时，有没有办法不继续堆叠/连接 props？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

函数组件接收props 对象作为参数，而不是电影。

在MovieOnDashboard 中，您正在调用您的道具对象（其中将包含一个键movie）movie。这就是为什么你必须做movie.movie之类的事情。

当您调用<OverlayEl movie={movie} /> 时，movie 将不是电影，而是包含您的电影的道具对象。这就是为什么你的嵌套孩子必须做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>
  )
}

不要忘记更新所有组件。

【讨论】：