Question

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

{名称：“ name”，room：“ room”} 是我单独发送的。但是状态显示为 {名称：“ room”：room：“”}

Google Chrome浏览器日志：

注意：如果需要，请从github存储库中检出代码here。

减速器：

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 }

在这里，您在name的操作中更改了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;
    }
}

反应-ContextAPI没有设置正确的状态

2 个答案: