UseReducer изменить состояние

Question

Я просто делаю простое приложение, в котором я получаю данные из API, а затем отображаю его название. При начальном рендеринге он работает нормально, но всякий раз, когда я пытаюсь изменить значение, предоставляя ввод (число), он не работает. Может кто-нибудь, пожалуйста, помогите мне указать, что не так с моим кодом? ТИА Вот скриншот моего кода. https://i.imgur.com/fogYFvT.png
https://i.imgur.com/Q811Bd3.png

import React, {useReducer, useEffect} from "react"
import axios from "axios"

const initialState = {
    isLoading : true,
    isError : '',
    id: 1,
    fetchedData : {}    
}

const actionHandler = (state,action) => {
    switch(action.type)
    {       
        case 'success' : 
            return {
                isLoading : false,
                isError : '',
                fetchedData: action.fetchedData
            }
        case 'error': 
            return {
                isLoading : false,
                isError : 'Something went wrong!',
                fetchedData: {}
            }
        case 'change' : 
            return {...initialState, id : action.value}
    }
}

function HooksUseReducerDataFetchingApp()
{
    const [data,action] = useReducer(actionHandler,initialState);
    useEffect(() => {
        axios.get(`https://jsonplaceholder.typicode.com/posts/${data.id}`)
            .then(response => {
                action({type:'success', fetchedData: response.data, error : 1000})                              
            })
            .catch(error => {               
                action({type:'error'})
            })
    }, [data])
    return(
        <>
            {data.isLoading ? 'Loading...' : console.log(data) }
            { data.isError ? data.isError : null }<br />
            <input 
                type="number"
                placeholder = "Enter a number"
                value = {data.id}
                onChange = { (e) => action({type: 'change', value: e.target.value }) }
            />
        </>
    )
}

export default HooksUseReducerDataFetchingApp

Answer 1

Вы передаете initialState.id в свой топор ios вызов. Вместо этого вам нужно передать data.id как useEffect зависимость и передать ее в вызове ax ios.

Вам необходимо использовать значение state в вашем actionHandler, чтобы получить правильное значение:

const actionHandler = (state,action) => {
    switch(action.type)
    {       
        case 'success' : 
            return {
                ...state
                isLoading : false,
                isError : '',
                fetchedData: action.fetchedData
            }
        case 'error': 
            return {
                ...state,
                isLoading : false,
                isError : 'Something went wrong!',
                fetchedData: {}
            }
        case 'change' : 
            return {...state, id : action.value}
    }
}