反應 - ContextAPI 沒有設置正確的 state

Question

我想知道我在這里做錯了什么。 調度方法正在調度正確的值，但 state object 顯示錯誤的值。

{ name: "name", room: "room" }是我單獨發送的。 但是 state 顯示{ name: "room": room: "" }

谷歌瀏覽器日志：

注意：如果需要，請從 github repo 中查看代碼。

減速器：

export const initialState = {
    name: '',
    room: ''
}

export const reducer = (state, action) => {
    console.log("Calling action", action);
    switch (action.type) {
        case types.SET_NAME:
            return { ...state, name: action.name }
        case types.SET_ROOM:
            return { ...state, name: action.room }
        default:
            return state;
    }
}

_app 組件：

import DataProvider from "../context/DataProvider";
import { initialState } from '../reducers/index';
import { reducer } from '../reducers';


const AppComponent = ({ Component, pageProps }) => {
    return (
        <DataProvider intialState={initialState} reducer={reducer}>
            <Component {...pageProps} />
        </DataProvider>
    )
}

AppComponent.getInitialProps = async (appContext) => {
    let pageProps = {};
    if (appContext.Component.getInitialProps) {
        pageProps = await appContext.Component.getInitialProps(appContext.ctx);
    }
    return { pageProps }
}

export default AppComponent;

組件：

const Join = () => {
    const [name, setName] = input('');
    const [room, setRoom] = input('');
    const [state, dispatch] = useContext(DataContext);

    const submit = (e) => {
        if (name === '' || room === '') {
            e.preventDefault();
            return;
        }
        dispatch({
            type: types.SET_NAME,
            name
        });
        dispatch({
            type: types.SET_ROOM,
            room
        });
    }

    return (
        <div>
            <h1>Join</h1>

            <input onChange={(e) => setName(e)} placeholder="name" />
            <input onChange={(e) => setRoom(e)} placeholder="room" />
            <Link href="/chat">
                <button type="submit" onClick={(e) => submit(e)}>Submit</button>
            </Link>

        </div>
    )
}

聊天組件（我正在消費狀態）：

const Chat = () => {
    // const backendEndpoint = 'http://localhost:5000';
    const [state, dispatch] = useContext(DataContext);
    console.log('STATE', state)
    return <h1>Chat</h1>
}

Chat.getInitialProps = async (ctx) => {
    return {}
}

export default Chat;

Answer 1

我認為問題出在你的減速機上

case types.SET_ROOM:
return { ...state, name: action.room }

在這里你在room的動作中改變name

也許你需要像這樣更新return {...state, room: action.room }

Answer 2

實際上你在你的 Reducer.js 中犯了一個錯誤

export const reducer = (state, action) => {
    console.log("Calling action", action);
    switch (action.type) {
        case types.SET_NAME:
            // equals state.name = action.name
            //  state = { name: 'name', room: '' }
            return { ...state, name: action.name }
        case types.SET_ROOM:
            // equal state.name = action.room
            //  state = { name: 'room', room: '' }
            return { ...state, name: action.room }
        default:
            return state;
    }
}

// u can change your code style to reduce mistakes
export const reducer = (state, action) => {
    const {name, room} = action
    switch (action.type) {
        case types.SET_NAME:
            return { ...state, name }
        case types.SET_ROOM:
            return { ...state, room }
        default:
            return state;
    }
}