React - ContextAPI 未设置正确的状态

Question

我想知道我在这里做错了什么。调度方法正在调度正确的值，但状态对象显示错误的值。

{ name: "name", room: "room" } 是我单独派的。但是状态显示 { name: "room": room: "" }

Google chrome 日志 :

注意：如果需要，请从 github 仓库中检查代码 here。

Reducer:

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 component:


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;

Component:

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>
    )
}

Chat component (where I am consuming state):

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

我认为问题出在你的reducer

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

在这里你改变 name in room 的动作

也许你需要像这样更新 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;
    }
}

React - ContextAPI 未设置正确的状态

React - ContextAPI not setting correct state

reactjs

react-router

react-redux

react-context