reducer 函数被调用两次

Question

我正在练习 React hooks，遇到了 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

找到

Answer 1

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

请检查this:

Another thing that React Strict Mode does is run certain callbacks/methods twice (in DEV mode ONLY). You read that right! The following callbacks/methods will be run twice in Strict Mode (in DEV mode ONLY)

reducer 函数被调用两次

reducer function is being called twice

javascript

reactjs

react-hooks

use-reducer