反應中的條件樣式 map

Question

我只想在懸停的項目上顯示顯示塊。 但是當我 hover 它顯示在 map function 中的每個項目上。我做錯了什么。

基本上，我只想顯示懸停的電影項目的標題。 現在，它在我 hover 時顯示每部電影。

電影列表.js

  const [popular, setPopular] = useState([]);
  const [hover, setHover] = useState(false);
  
  return (
    <>
      <div className="movie-list">
        <h2 style={{ fontSize: "49px", marginLeft: "60px" }}>What's Popular</h2>

        <div className="popular">
          {popular.map((pop, index) => (
            <>
              <div className="movie" key={index}>
                <div className="tot" onMouseEnter={() => setHover(true)}>
                  <h4
                    id="pop-title"
                    style={{ display: hover ? "block" : "none" }}
                    key={index}
                  >
                    {pop.title}
                  </h4>
                </div>
                <img
                  src={"https://image.tmdb.org/t/p/w500" + pop.poster_path}
                  id="movie-img"
                />
              </div>
            </>
          ))}
        </div>
      </div>
    </>
  );
};

export default MovieList;

Answer 1

相同的hover state 變量用於所有電影，因此當它變為真時，所有電影都會受到更改的影響。 您可以使用 object 而不是 boolean 來為每部電影存儲一個 hover state。

您的代碼的另一個問題沒有幫助：

您在map的每個項目上都缺少一個唯一的key道具（它必須在直接孩子上）。

解決方案 1：刪除片段

一切都已經在一個div下，所以在這種情況下你不需要 React Fragment ( <> )。 此外，您可能想使用當前 map 項目獨有的東西，而不是數組中的索引。

{popular.map((pop) => (
    <div className="movie" key={pop.somethingUnique}>
        <div className="tot" onMouseEnter={() => setHover(true)}>
            <h4 id="pop-title" style={{ display: hover ? "block" : "none" }}>
                {pop.title}
            </h4>
        </div>
        <img
            src={"https://image.tmdb.org/t/p/w500" + pop.poster_path}
            id="movie-img"
        />
    </div>
))}

方案二：在Fragment上設置key

{popular.map((pop) => (
    <Fragment key={pop.somethingUnique}>
        <div className="movie">
            <div className="tot" onMouseEnter={() => setHover(true)}>
                <h4 id="pop-title" style={{ display: hover ? "block" : "none" }}>
                    {pop.title}
                </h4>
            </div>
            <img
                src={"https://image.tmdb.org/t/p/w500" + pop.poster_path}
                id="movie-img"
            />
        </div>
    </Fragment>
))}