當我在 useEffect 中設置狀態時，組件沒有呈現

Question

為什么當我在我的 useEffect 中設置狀態時我的組件沒有再次渲染？ 我在谷歌上讀到，如果我在 useEffect 中設置狀態，組件將再次渲染

我的代碼：

export default function CarouselMusicGenres() {
    const [musicGenres, setMusicGenres] = useState(null)

    const setAllMusicGenres = () => {
        MusicGenresAPI.getAll()
            .then((response) => {
                if (response.status === 200) {
                    setMusicGenres(response.data.musicGenres)
                }
            })
            .catch((error) => {
                console.log(error)
            })
    }

    const displayAllMusicGenres = () => {
        if (musicGenres && musicGenres.length > 0) {
            musicGenres.forEach((musicGenre) => {
                return (
                    <SwiperSlide>
                        <Col
                            className="genre"
                            style={{
                                backgroundImage: `url(/assets/images/music-genres/${musicGenre.image_background_url})`,
                            }}
                        >
                            <span>{musicGenre.genre}</span>
                            <div className="transparent-background"></div>
                        </Col>
                    </SwiperSlide>
                )
            })
        }
    }

    useEffect(() => {
        setAllMusicGenres()
    }, [])

    return (
        <Row className="carousel-genres">
            <Swiper spaceBetween={10} slidesPerView={6}>
                {displayAllMusicGenres()}
            </Swiper>
        </Row>
    )
}

我嘗試了類似的東西，而不是 useEffect 但仍然不起作用

if (!musicGenres) {
        setAllMusicGenres()
}

問題已修復

我需要使用 map 而不是 foreach 來獲取返回的數組並在我的 musicGenres.map 之前添加 return

Answer 1

為了返回一個數組，你應該使用 map 如果你想在更改時重新渲染，你需要在依賴數組中添加一些東西。 當你這樣做時

useEffect(() => {
    setAllMusicGenres()
}, [])

您只是告訴它 setAllMusicGenre 在加載時而不是在更改時，如果您希望它在 musicGenres 發生特定更改時更改，則應將其添加到數組中。

useEffect(() => {
    setAllMusicGenres()
}, [musicGenres ])

Answer 2

您需要添加依賴項才能一次又一次地渲染它，例如，在您的情況下， musicGenres state 將是您的依賴項，因此您需要編寫 useState 如下所示 -

    useEffect(() => {
    setAllMusicGenres()
},[musicGenres])

每當您更新 musicGenres 時，它都會更新您的組件注意：您還需要傳遞密鑰（它應該始終是唯一的）所以 DOM 可以理解某些變化並且它會相應地更新

當您在鈎子中編寫下面給出的 useEffect 時 -

useEffect(() => {
        setAllMusicGenres()
    }, [])

它會像 componentDidMount