我正在练习React挂钩,并遇到useReducer和dispatch函数的问题。从第二秒开始,当我单击任何一个按钮时,我创建的reducer函数都会被调用两次。第一次单击任一按钮时,控制台日志输出将打印一次,然后在每次按下按钮时将其打印两次。
这是我的文件:
Utils.js
import React, {createContext, useReducer, useContext} from 'react';
const initialState = {
text: 0
}
const StoreContext = createContext(initialState);
const reducer = (state, action) => {
console.log('hello');
switch(action.type) {
case 'add-counter': return {
...state,
text: state.text + 1
}
default:
throw new Error();
}
}
export const StoreProvider = ({children}) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<StoreContext.Provider value={{state, dispatch}}>
{children}
</StoreContext.Provider>
)
}
export const useStore = (store) => {
const {state, dispatch} = useContext(StoreContext);
return {state, dispatch};
}
UserList.js
import React, {useCallback} from 'react';
import { Row, Col, Button } from 'antd';
import TextDisplayComponent from './TextDisplay';
import {useStore} from '../util';
function ListComponent() {
const {dispatch} = useStore();
const increment = useCallback(() => dispatch({type: 'add-counter'}), [dispatch])
return (
<Row>
<Col span={12} style={{textAlign: 'center'}}>
<Button type="primary" onClick={increment}>Press Me</Button>
</Col>
<Col span={12} style={{textAlign: 'center'}}>
<TextDisplayComponent />
</Col>
</Row>
)
}
export default ListComponent;
TextDisplay.js
import React, {useCallback} from 'react';
import {Button} from 'antd'
import {useStore} from '../util'
function TextDisplayComponent() {
const {state, dispatch} = useStore();
const increment = useCallback(() => dispatch({type: 'add-counter'}), [dispatch])
return (
<div>
{state.text}
<Button onClick={increment}>Add</Button>
</div>
)
}
export default TextDisplayComponent
App.js
import React from 'react';
import UserListComponent from './components/UserList';
import 'antd/dist/antd.css';
import {StoreProvider} from './util';
function App() {
React.createContext()
return (
<StoreProvider>
<div className="App">
<UserListComponent />
</div>
</StoreProvider>
);
}
export default App;
有人可以帮忙吗?谢谢。
完整的测试项目可以在https://github.com/Saro-DA/my-app.git
找到答案 0 :(得分:1)
这是故意的。您将应用包装在<React.StrictMode>
中,这将导致这种情况在开发模式下发生。
请检查this:
React Strict Mode所做的另一件事是确定运行 两次回调/方法(仅在DEV模式下)。您没看错!的 以下回调/方法将在严格模式下运行两次(在DEV中 模式)