如何在反应中将新值推送到数组useState中

Question

我想当我点击电影名称的卡片时，这个电影名称被推送到 useSate 中。问题是当我点击同一张卡片时，数据作为数组保存在 useState 中。但是当我点击不同的卡片时，useState 的先前值被删除。

这是我的代码。 movie 是单个对象。

const MovieCard = ({ movie }) => {
    const [firstCat, setFirstCat] = React.useState([]);
    



    const movieList = (movie) => {
        setFirstCat([...firstCat, movie]);
    }

    console.log(firstCat);

    return (
        <div className='mt-3 cursor-pointer' onClick={() => movieList(movie)}>
            <div className="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md">

                <img className="rounded-t-lg" src="/docs/images/blog/image-1.jpg" alt="" />

                <div className="p-5">

                    <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900">{movie.Title}</h5>

                </div>
            </div>
        </div>
    );
};

export default MovieCard;

点击同一张卡片时，useState是这样的，

点击不同的卡片时

Answer 1

你的问题是你只在 MovieCard 中限定了你的状态，这意味着每个 MovieCard 将有不同的状态。

您需要在 MovieCard 的 upper/parent 组件上添加状态。假设您有 MovieList 包含所有 MovieCard

const MovieList = () => {
   const [firstCat, setFirstCat] = React.useState([]);

   console.log(firstCat);

   return <div>
      <MovieCard movie={movie} setFirstCat={setFirstCat}/>
   <div/>
}

并像下面那样修改你的MovieCard

const MovieCard = ({ movie, setFirstCat }) => {

    const movieList = (movie) => {
        setFirstCat([...firstCat, movie]);
    }

    return (
        <div className='mt-3 cursor-pointer' onClick={() => movieList(movie)}>
            <div className="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md">

                <img className="rounded-t-lg" src="/docs/images/blog/image-1.jpg" alt="" />

                <div className="p-5">

                    <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900">{movie.Title}</h5>

                </div>
            </div>
        </div>
    );
};

export default MovieCard;

这个技巧叫做state lifting

Answer 2

看起来每个 MovieCard 组件都有自己的 firstCat 状态。当您单击另一张电影卡片时，您正在更新那个卡片的状态。

您可能需要 lift state up 并将 firstCat 状态存储在公共父组件中，以便所有 MovieCard 组件可以引用同一个状态。

示例：

const Movies = () => {
  const [movies, setMovies] = React.useState([.......]);
  const [firstCat, setFirstCat] = React.useState([]);

  const addMovie = (movie) => {
    setFirstCat(firstCat => [...firstCat, movie]);
  }

  return movies.map(movie => (
    <MovieCard
      key={movie.id}
      movie={movie}
      addMovie={() => addMovie(movie)}
    />
  ));
}

...

const MovieCard = ({ movie, addMovie }) => {
  return (
    <div className='....' onClick={addMovie}>
      <div className="....">
        <img
          className="...." 
          src="...."
          alt=""
        />
        <div className="p-5">
          <h5 className="....">
            {movie.Title}
          </h5>
        </div>
      </div>
    </div>
  );
};

如何在反应中将新值推送到数组useState中

How to push new value in array useState in react

reactjs

react-hooks

use-state