Redux状态不会更改值

dffbzjpn  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(159)

大家早上好!我有一个问题,我无法更改我的**“userReducer.js”状态,也无法在“name”值输入中键入任何内容。导致此错误的原因是什么?我创建了一个名为test的状态,并使用类型编号代替输入“name”,组件“App.js”中的值已更改,“userReducer”**中的状态未更改。

用户还原器.js:

import { createSlice } from '@reduxjs/toolkit';

const slice = createSlice({
    name: 'user',
    initialState: {
        name: 'bonieky',
        age: 90,
    },

    reducers: {
        setName: (state, action) => {
            state.name = action.payload
        },
        setAge: (state, action) => {
            state.age = action.payload;
        },
    }
});

export const { setName, setAge } = slice.actions;
export default slice.reducer;

存储.js:

import {configureStore} from '@reduxjs/toolkit';

import userReducer from './reducers/userReducer';

import themeReducer from './reducers/themeReducer';

export const store = configureStore({
    reducer: {
        user: userReducer,
        theme: themeReducer,
    }
});

应用程序js:

import {useDispatch} from 'react-redux';
import {setName, setAge} from './redux/reducers/userReducer';
import { useSelector } from 'react-redux';

function App() {
  const dispatch = useDispatch();

  const user = useSelector((state)=> state.user);

  const handleNameInput = (e) => {
    dispatch(setName(e.targe.value));
  }

  const handleAgeInput = (e) => {
    dispatch(setAge(e.target.value));
  }

  return (
    <div>
      Meu name is {user.name} and I am  {user.age} years old. <br/> 

      <hr />
      <input type="text" value={user.name} onChange={handleNameInput} />
      <input type="text" value={user.age} onChange={handleAgeInput} />

    </div>
  );
}

export default App;

索引.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { Provider } from 'react-redux';
import { store } from './redux/store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

repository link

zmeyuzjn

zmeyuzjn1#

下面的函数中有一个拼写错误。它应该是e.target.value

const handleNameInput = (e) => {
    dispatch(setName(e.targe.value));
}

要调试意外行为,我建议您在调试机制中包括“在浏览器控制台中查找”。
例如,您可能会在控制台中看到以下错误:以下消息告诉我们handleNameInput中出现了错误,程序在阅读.value时遇到了问题。

相关问题