减速器函数被调用两次

Question

我正在练习 React 钩子，遇到了 useReducer 和 dispatch 函数的问题。当我在第二次点击任一按钮时，我创建的 reducer 函数被调用了两次。我的控制台日志输出在第一次单击任一按钮时打印一次，然后在每次按下按钮时打印两次。

这是我的文件：

实用程序.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};

}

用户列表.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;

文本显示.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>

    )

}

有人可以帮忙吗？谢谢。

完整的测试项目可以在https://github.com/Saro-DA/my-app.git找到

Answer 1

那是故意的。您将应用程序包装在 中<React.StrictMode>，这将导致在开发模式下发生这种情况。请检查：React Strict Mode 所做的另一件事是运行某些回调/方法两次（仅在 DEV 模式下）。你没看错！以下回调/方法将在严格模式下运行两次（仅在 DEV 模式下）