使用useReducer Hook获取API数据时状态未更新问题排查

问题描述 #

尝试使用useReducer Hook在API请求成功后更新状态，API返回数据正常，但状态始终未更新，控制台无报错，已检查拼写。相关代码如下：

function Provider (props) {
    let trackState = {
        trackList: [],
        heading: "Top 10 Tracks"  
    }

    const reducer = (state, action) => {
        switch (action.type) {
            case "SEARCH TRACKS":
                return {
                   ...state,
                    trackList: action.payload,
                    heading: 'Search results'
                }

            case "NOT_SEARCHING":
                return {
                    ...state,
                    trackList: action.payload,
                    heading: 'TOP 1O Tracks',
                }

            default:
                return state
        }
    }

    const [state, dispatch] = useReducer(reducer, trackState)

    React.useEffect(() => {
fetch(`https://thingproxy.freeboard.io/fetch/${API.url}${API.tracks}&apikey=${API.key}`) 
        .then(res => {
             if(res.ok) { 
                return res.json()
                }  
                else {
                    throw res;
                }
        
            })
            .then(result => {
                
                dispatch({ type: "NOT_SEARCHING", payload: result.message.body.track_list })
                
                console.log(state)
            }
            )
        }, [])  
        

    return (
        <Context.Provider value={{trackState, API, dispatch}}>

          {props.children}
        </Context.Provider>
    )

}

export {Provider, Context}

解决方案 #

1. 修正Context传递的状态对象 #

你在Context.Provider中传递的是初始定义的trackState，而非useReducer返回的实时更新的state，导致消费Context的组件始终拿到初始值。

修改Provider的value：

<Context.Provider value={{state, API, dispatch}}>
  {props.children}
</Context.Provider>

同时确保子组件中使用的是state.trackList和state.heading。

2. 正确查看更新后的状态 #

dispatch是异步操作，调用后立即console.log(state)打印的是当前闭包中的旧状态。若要查看更新后的状态，需通过useEffect监听state变化：

React.useEffect(() => {
  console.log('更新后的状态:', state);
}, [state]);

3. 修正拼写错误（潜在问题） #

NOT_SEARCHING分支中heading的值写成了'TOP 1O Tracks'，其中O是字母，应改为数字0：'TOP 10 Tracks'，避免显示异常。

内容的提问来源于stack exchange，提问作者Abby