当我在 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