React观影列表组件渲染异常：添加影片仅显示在首页

我搭建了一个小型电影数据库，希望将影片展示到WatchList组件中。目前可正常搜索影片，但点击“Add to Watchlist”按钮后，影片仅渲染在HomeScreen组件，WatchList组件始终为空。

代码实现 #

HomeScreen.js #

import React from 'react'
import { useEffect, useState } from 'react';
import "./HomeScreen.css"
import MovieList from './componnents/MovieList';
import Header from './componnents/Header';
import AddWatchlist from './componnents/AddWatchlist';
import WatchList from './componnents/WatchList';

function HomeScreen() {
    const [movies, setMovies] = useState([]);
    const [watchList, setWatchList] = useState([]);
    const [searchValue, setSearchValue] = useState('');
  
    const getMovieRequest = async (searchValue) => {
      const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=93fe1299`;
      const response = await fetch(url);
      const responseJson = await response.json();
  
      if (responseJson.Search) {
        setMovies(responseJson.Search);
      }
    };
  
    useEffect (() => {
      getMovieRequest(searchValue);
    }, [searchValue]);

    const addToWatchlist = (movie) => {
      const newWatchList = [...watchList, movie];
      setWatchList(newWatchList);
    };

  return (
    <div className="HomeScreen">
        <Header searchValue={searchValue} setSearchValue={setSearchValue}/>
    <div className='movie__row'>
        <MovieList movies={movies} handleWatchlist={addToWatchlist} watchlistComponent={AddWatchlist}/>
    </div>
    <div className='movie__row'>
        <WatchList watchList={watchList}/>
    </div>
  </div>
  );
}

export default HomeScreen

MovieList.js #

import React from 'react'
import "./MovieList.css"

const MovieList = (props) => {
  const WatchlistComponent = props.watchlistComponent;
  return (
    <>
    {props.movies.map((movie, index) =>
      <div className='image__container'>
        <img src={movie.Poster} alt='movie'></img>
        <div onClick={()=> props.handleWatchlist(movie)} className='add__watchlist'>
          <WatchlistComponent/>
        </div>
      </div>
     )}
    </>
  )
}

export default MovieList;

WatchList.js #

import React from 'react'
import "./WatchList.css"

function WatchList({watchList}) {
  if (!watchList) {
    return null;
}

  return (
    <div className='watchlist'>
    <h2>Watch List</h2>
    {watchList.map((movie) => (
      <img src={movie.Poster} />
    ))}
  </div>
);
}

export default WatchList

问题排查与修复 #

你的核心逻辑没有错误，问题出在几个细节处理上：

1. 移除WatchList中冗余的空判断
   watchList初始值是空数组[]，不是null，所以if (!watchList)永远不会触发，属于无效代码。直接删除后，空数组调用map不会渲染内容，符合预期：

// 修改后的WatchList.js
function WatchList({watchList}) {
  return (
    <div className='watchlist'>
      <h2>Watch List</h2>
      {watchList.map((movie) => (
        <img key={movie.imdbID} src={movie.Poster} alt={movie.Title} />
      ))}
    </div>
  );
}

2. 为列表项添加唯一key
   React要求列表循环的每个元素必须有唯一key，避免渲染警告，同时保证列表更新时的正确性。用电影的imdbID作为key（天然唯一），也可以用循环的index：

• MovieList中给image__container的div添加key={movie.imdbID}
• WatchList中给img添加key={movie.imdbID}

3. 优化状态更新逻辑
   使用函数式更新确保每次状态变更都基于最新值，避免闭包导致的状态不一致问题：

// HomeScreen.js中修改addToWatchlist
const addToWatchlist = (movie) => {
  setWatchList(prevList => [...prevList, movie]);
};

做完以上修改后，点击添加按钮，WatchList组件就能正常渲染添加的影片了。

内容的提问来源于stack exchange，提问作者Brinda5