React重新渲染后如何保存组件状态：搜索后电影卡片选中样式丢失如何解决

问题根源 #

选中样式丢失是三个问题共同导致的：

• 卡片选中状态isActive存储在MovieCard组件内部，每次搜索触发父组件重渲染时，符合筛选条件的卡片会重新挂载，内部状态直接重置为初始值false
• 父组件已经存储了全局的选中id列表selectedList，但没有把对应卡片的选中状态传递给子组件，子组件无法拿到全局存储的选中信息
• 渲染卡片时用数组索引当key、直接修改selectedList原数组不符合React不可变更新规范，会引发潜在的状态异常

父组件修改 #

1. 渲染卡片时把key替换为唯一的电影id，避免重渲染时组件复用异常
2. isSelected传值改为判断当前电影id是否在选中列表中，不要写死false

// 其余代码不变，仅修改列表渲染的map部分
.map((value) => {
  return (
    <MovieCard
      movieName={value.name}
      key={value._id}
      movieId={value._id}
      selected={selectedList}
      setSelected={setSelectedList}
      isSelected={selectedList.includes(value._id)}
    />
  );
})

子组件（MovieCard）修改 #

1. 删掉内部的isActive状态和冗余的toggleClass、空useEffect，直接用父组件传入的isSelected控制样式
2. 不要直接修改传入的selected原数组，改为不可变方式更新状态

export default function Index({ selected, movieName, movieId, setSelected, isSelected }) {
  const pushToSelected = () => {
    if (selected.includes(movieId)) {
      // 不可变方式移除选中id
      setSelected(selected.filter(id => id !== movieId))
    } else {
      // 不可变方式新增选中id
      setSelected([...selected, movieId])
    }
  };

  return (
    <div>
      <img
        className={isSelected ? style.movie_selected : style.movie}
        id={movieId}
        name={movieName}
        src={`images/movies/${movieName}.jpg`}
        alt={movieName}
        onClick={pushToSelected}
      />
      <h3 className={style.title}>{movieName}</h3>
    </div>
  );
}

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