通过 useEffect Hook 在本地状态更改后更新 DOM

Question

该组件第一次使用默认组件渲染。在父组件从 API 获取可选数据后，我需要更新 DOM。目前，组件在 useEffect 中设置本地状态时成功重新渲染。我需要调用一个函数来根据新状态更改 span 元素的属性。

useEffect(() => {
        setCurrentRating(props.rating);
        console.log('Runned only first time', currentRating);
        // needed to call setRating function that changes the color of star elements
    }, [props.rating]);

    const setRating = (ev) => {
        console.log('Setting initial retting', currentRating);
        const starElements = ratingEl.current.getElementsByClassName('star');
        Array.from(starElements).forEach(starEl => {
          starEl.style.color =
            currentRating >= starEl.dataset.value ? 'green' : 'gray';
        });
    }