React按钮状态冲突：肖恩·康纳利与罗杰·摩尔电影列表互串

核心问题原因 #

你遇到的问题是因为两个按钮共用了同一个movies状态变量，点击任意按钮都会覆盖全局状态，导致两个列表区域显示相同内容。这和演员名称含空格无关，只是没找到合适的方式为不同演员创建独立状态。

三种可行解决方案 #

方案1：用对象存储多演员状态

直接用带空格的演员名作为对象的键，JavaScript完全支持这种写法，通过键值对区分不同演员的电影数据：

// 初始化状态
const [actorMovies, setActorMovies] = useState({
  "Sean Connery": [],
  "Roger Moore": []
});

// 加载Sean Connery的电影数据
const loadSeanConneryMovies = async () => {
  const fetchedMovies = await fetchMoviesByActor("Sean Connery");
  setActorMovies(prevState => ({
    ...prevState, // 保留其他演员的数据
    "Sean Connery": fetchedMovies
  }));
};

// 加载Roger Moore的电影数据同理
const loadRogerMooreMovies = async () => {
  const fetchedMovies = await fetchMoviesByActor("Roger Moore");
  setActorMovies(prevState => ({
    ...prevState,
    "Roger Moore": fetchedMovies
  }));
};

// 渲染对应列表
<div className="sean-connery-list">
  {actorMovies["Sean Connery"].map(movie => (
    <div key={movie.id}>{movie.title}</div>
  ))}
</div>
<div className="roger-moore-list">
  {actorMovies["Roger Moore"].map(movie => (
    <div key={movie.id}>{movie.title}</div>
  ))}
</div>

方案2：为每个演员单独创建状态变量

如果演员数量不多，直接给每个演员声明独立状态变量，逻辑更直观：

// 初始化独立状态
const [seanConneryMovies, setSeanConneryMovies] = useState([]);
const [rogerMooreMovies, setRogerMooreMovies] = useState([]);

// 各自的点击事件处理
const handleSeanClick = async () => {
  const movies = await fetchMoviesByActor("Sean Connery");
  setSeanConneryMovies(movies);
};

const handleRogerClick = async () => {
  const movies = await fetchMoviesByActor("Roger Moore");
  setRogerMooreMovies(movies);
};

// 渲染时分别使用对应状态
<button onClick={handleSeanClick}>Sean Connery's List of Movies</button>
<div>{seanConneryMovies.map(movie => <div key={movie.id}>{movie.title}</div>)}</div>

<button onClick={handleRogerClick}>Roger Moore's List of Movies</button>
<div>{rogerMooreMovies.map(movie => <div key={movie.id}>{movie.title}</div>)}</div>

方案3：用Map存储状态（适合扩展多演员场景）

如果后续要添加更多007演员，用Map管理状态更灵活，键可直接使用带空格的演员名称：

// 初始化Map状态
const [actorMoviesMap, setActorMoviesMap] = useState(new Map());

// 更新Sean Connery的电影数据
const loadSeanMovies = async () => {
  const movies = await fetchMoviesByActor("Sean Connery");
  setActorMoviesMap(prevMap => new Map(prevMap).set("Sean Connery", movies));
};

// 渲染时获取对应数据
<div>
  {(actorMoviesMap.get("Sean Connery") || []).map(movie => (
    <div key={movie.id}>{movie.title}</div>
  ))}
</div>

关键注意点 #

不管用哪种方案，核心都是让每个演员的电影数据对应独立的状态分支，避免共用同一状态变量导致的覆盖问题。演员名称的空格不会影响状态区分，只要在引用键值时正确使用引号（对象）或直接传入字符串（Map）即可。

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