减速器函数被调用两次

Question

我正在练习 React 钩子，遇到了 useReducer 和 dispatch 函数的问题。当我在第二次点击任一按钮时，我创建的 reducer 函数被调用了两次。我的控制台日志输出在第一次单击任一按钮时打印一次，然后在每次按下按钮时打印两次。这是我的文件：实用程序.jsimport 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};}用户列表.jsimport 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;文本显示.jsimport 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>    )}有人可以帮忙吗？谢谢。完整的测试项目可以在https://github.com/Saro-DA/my-app.git找到

Answer 1

那是故意的。您将应用程序包装在 中<React.StrictMode>，这将导致在开发模式下发生这种情况。

请检查：

React Strict Mode 所做的另一件事是运行某些回调/方法两次（仅在 DEV 模式下）。你没看错！以下回调/方法将在严格模式下运行两次（仅在 DEV 模式下）