重新渲染后如何保存组件状态？反应js

Question

有一些电影卡片，客户可以点击它们，它们的颜色会变成灰色并带有模糊效果，这意味着电影被选中。 同时，电影 id 被转移到一个数组列表中。在搜索栏中，您可以搜索自己喜欢的电影，但问题是在您在输入区域中键入内容后，灰色的电影卡会失去其样式（我想是因为它们已根据我的代码被删除并再次渲染），但是数组部分运行良好，它们仍在数组列表中。 我怎样才能保持他们的风格？

搜索页面：

export default function Index(data) {
  const info = data.data.body.result;
  const [selectedList, setSelectedList] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <>
      <main className={parentstyle.main_container}>
        <NavBar />
        <div className={style.searchbar_container}>
          <CustomSearch
            onChange={(e) => {
              setSearchTerm(e.target.value);
            }}
          />
        </div>
        <div className={style.card_container}>
          {info
            .filter((value) => {
              if (searchTerm === '') {
                return value;
              } else if (
                value.name
                  .toLocaleLowerCase()
                  .includes(searchTerm.toLocaleLowerCase())
              ) {
                return value;
              }
            })
            .map((value, key) => {
              return (
                <MovieCard
                  movieName={value.name}
                  key={key}
                  movieId={value._id}
                  selected={selectedList}
                  setSelected={setSelectedList}
                  isSelected={false}
                />
              );
            })}
        </div>
        <div>
          <h3 className={style.test}>{selectedList}</h3>
        </div>
      </main>

电影卡组件：

export default function Index({ selected, movieName, movieId, setSelected }) {
  const [isActive, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!isActive);
  };

  useEffect(()=>{

    
  })

  const pushToSelected = (e) => {
    if (selected.includes(e.target.id)) {
      selected.splice(selected.indexOf(e.target.id), 1);

      console.log(selected);
    } else {
      selected.push(e.target.id);

      console.log(selected);
      console.log(e.target);
    }
    setSelected([...selected]);
    toggleClass();
  };

  return (
    <div>
      <img
        className={isActive ? 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>
  );
}

Answer 1

我无法直接测试您的代码，所以我会假设这是问题所在：

1. 不要直接转换状态（拼接/推送） - 始终创建克隆或其他东西。
2. 使setActive 基于列表而不是依赖。 （这是样式被删除的真正问题）

试试这个：

  const pushToSelected = (e) => {
    if (selected.includes(e.target.id)) {
      
      // filter out the id
      setSelected(selected.filter(s => s !== e.target.id));
      return;
    }
    
    // add the id
    setSelected([...selected, e.target.id]);
  };

  // you may use useMemo here. up to you.
  const isActive = selected.includes(movieId);

  return (
    <div>
      <img
        className={isActive ? 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>
  );

Answer 2

这是一个非常广泛的话题。您可以做的最好的事情是查找“React 状态管理”。 与 react 生态系统中的所有内容一样，它可以由各种不同的库处理。 但在最新版本的 React 中，您可以首先查看内置工具： 查看状态生命周期：https://reactjs.org/docs/state-and-lifecycle.html （我在您的示例中看到您正在使用 useState 挂钩，但我正在添加这些挂钩，以便为需要它的人提供更结构化的解释）

那你可能想看看状态相关的钩子，比如 useState:https://reactjs.org/docs/hooks-state.html

useEffect（与 useState 一起使用）： https://reactjs.org/docs/hooks-effect.html

以及使用上下文： https://reactjs.org/docs/hooks-reference.html#usecontext

对于内置工具集之外的东西，有许多流行的状态管理库也可以与 React 一起使用，其中最流行的是：Redux、React-query、Mobx、Recoil、Flux、Hook-state。请记住，您应该使用什么取决于您的用例和需求。这些还可以帮助您不仅在重新渲染之间而且在应用程序的刷新之间保持您的状态。每天都会出现越来越多的库。

这是一篇不错的文章，包含更多信息： https://dev.to/workshub/state-management-battle-in-react-2021-hooks-redux-and-recoil-2am0#:~:text=State%20management%20is%20simply%20a,you%20can%20read%20and%20write.&text=When%20a%20user%20performs%20an,occur%20in%20the%20component's%20state.