reactjs - fetch-förfrågan inuti en useEffect-hook händer bara när komponenten först renderas. använder Redux

När PlantTimeline-komponenten renderas finns det en fetch-förfrågan som hämtar alla uppdateringar baserat på currentPlant-id. Dessutom finns det ett select-input som tillåter att ändra currentPlant. När currentPlant ändras vill jag att fetch-förfrågan ska köras igen så att uppdateringarna blir relevanta för den nya currentPlant. Att ändra currentPlant renderar komponenten och triggar useEffect, den nya currentPlant visas, men fetch-förfrågan körs inte mer än en gång - när komponenten renderas första gången.

noterbart - jag använder Redux och inte useState för variabeln currentPlant.

För felsökningsändamål har jag lagt till två console.log(...) inuti useEffect-hooken:

console.log('F E T C H I N G') som bara loggar när komponenten först renderas.

console.log('useEffect hände') som loggar varje gång jag ändrar currentPlant.

Jag vill att hämtningen också ska ske varje gång jag ändrar currentPlant.

igen, jag använder Redux och inte useState för variabeln currentPlant.

komponenten:

export default function PlantTimeline() {
    const [addPlantUpdateModal, setAddPlantUpdateModal] = useState<boolean>(false)
    const dispatch = useAppDispatch()
    const currentPlant = useAppSelector(state => state.plants.currentPlant)
    const plants = useAppSelector(state => state.plants.plants)
    const selectInput = useRef<HTMLSelectElement>(null)
    const [plantUpdates, setPlantUpdates] = useState<PlantUpdate[]>([])
    useEffect(() => {
        fetch(`${BASIC_URL}/getAllUpdatesByPlantId?id=${currentPlant!.id}`)
        .then(response => response.json())
        .then((updates => {
            const newUpdates = []
            for (let update of updates) {
                console.log('F E T C H I N G')
                const newUpdate = new PlantUpdate(update._id, update.plantId, update.plantName, update.dateAdded, update.img.data.data,
                                update.irrigation.boolean, update.irrigation.waterQuantity,
                                update.irrigation.fertilizer, update.irrigation.fertilizerQuantity, update.notes)
                newUpdates.push(newUpdate)
            }
            setPlantUpdates(newUpdates)
            console.log('useEffect Happened');
            
        }))
    },[currentPlant])
    function editUpdate() {
        return
    }
    function switchCurrentPlant(): void {
        const plantName = selectInput.current?.value
        for (let plant of plants) {
            if (plant.name === plantName) {
                dispatch(setCurrentPlant(plant))
                return
            }
        }
    }

    return(
        <>
        <div className="page-container">
            <div id="plant-timeline-container">
                <div className="plant-options">
                    <div id="plant-intro">
                        <img className="plant-logo" src={`data:image/png;base64,${bufferToImage(currentPlant?.imageBufferArray)}`}/>
                        <div id="current-plant-details">
                            {capitalize(currentPlant?.name as string)}<br />
                            Added on: {currentPlant?.dateAdded}<br />
                            Total Updates: {plantUpdates.length}<br />
                            Plant Id: {currentPlant?.id}
                        </div> 
                    </div>
                    <GreenButton text="Add an Update" onClick={() => setAddPlantUpdateModal(true)}/>
                    <div className="select-current-plant">
                        Select Current Plant<br />
                        <select defaultValue={currentPlant?.name} ref={selectInput} onChange={switchCurrentPlant}>
                            {plants.map(plant => {
                                return(
                                    <option key={plant.id}>{plant.name}</option>
                                )
                            })}
                        </select>
                    </div>
                </div>
                <div id="plant-updates">
                    {plantUpdates.map((update) => {
                    return (
                        <div className="update-card" key={update.id}>
                            <div className="date-and-edit">
                                <div className="card-date">{update.dateAdded}</div>
                                <GreenButton text="Edit Update" onClick={editUpdate}/>
                            </div>
                            <div className="info">
                                <div className="update-irrigation">
                                    <div className="card-property">Irrigation: {update.irrigation.IrrigationBoolean as boolean ? <img className="checked-logo" src={checkedSVG}/> : <img className="checked-logo" src={redXsvg}/>} </div>
                                    {update.irrigation.IrrigationBoolean as boolean && 
                                    <>
                                    <div className="card-property">Water Quantity: {update.irrigation.waterQuantity?.toString()} ml</div>
                                    <div className="card-property">Fertilizer: {update.irrigation.fertilizer}</div>
                                    <div className="card-property">Fertilizer Quantity: {update.irrigation.fertilizerQuantity?.toString()}</div>
                                    </>
                                    }
                                </div>
                                <div className="card-property" id="update-notes">Notes: <br />{update.notes} </div>
                                <div className="update-images">
                                    <div className="card-property"><img className="update-image" src={`data:image/png;base64,${bufferToImage(update.updateImageBufferArray)}`}/> </div>
                                </div>
                            </div>
                        </div>
                    )
                })}
                </div>
            </div>
        </div>
        {addPlantUpdateModal && <Modal open={addPlantUpdateModal} onClose={() => setAddPlantUpdateModal(false)} content={<AddPlantUpdateForm currentPlant={currentPlant as Plant}/>}></Modal>}
        </>
    )
}