大家早上好!我有一个问题,我无法更改我的**“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();
1条答案
按热度按时间zmeyuzjn1#
下面的函数中有一个拼写错误。它应该是
e.target.value
。要调试意外行为,我建议您在调试机制中包括“在浏览器控制台中查找”。
例如,您可能会在控制台中看到以下错误:以下消息告诉我们
handleNameInput
中出现了错误,程序在阅读.value
时遇到了问题。