描述问题

我尝试在故事中使用useEffect来模拟fetch,但是hooks无限渲染。

重现问题

为了帮助理解问题，我粘贴了示例代码片段来重现此问题。

预期行为

在初始渲染后不应再渲染。在浏览器(已在Chrome和safari中测试),相同的组件不会重新渲染。

截图

代码片段

// Reducers
export const testInit = {
  list: [],
};

export const testReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_LIST': {
      const { list } = action.payload;
      return { ...state, list };
    }
    default:
      return state;
  }
};

// Store
import { createContext } from 'react';
const TestStore = createContext();
export { TestStore };

// Stories
import React, { useReducer, useContext, useEffect } from 'react';
import { testInit, testReducer } from 'reducers';
import { TestStore } from 'contexts/Store';

const mockList = [
  {
    name: 'name1',
    id: 1,
  },
  {
    name: 'name2',
    id: 2,
  },
];

const getMockedList = () =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve(mockList);
    }, 1000);
  });

export default {
  title: 'MockFetch',
  decorators: [
    (StoryFn) => {
      const [testState, dispatchTest] = useReducer(testReducer, testInit);
      return (
        <TestStore.Provider value={{ state: testState, dispatch: dispatchTest }}>
          <StoryFn />
        </TestStore.Provider>
      );
    },
  ],
};

export const MockFetch = () => {
  const Context = useContext(TestStore);

  const { dispatch } = Context;

  useEffect(() => {
    console.log('renders');
    getMockedList().then((response) => dispatch({ type: 'FETCH_LIST', payload: { list: response } }));
  }, []);
  return <p>Mock fetch</p>;
};

系统：

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 14.3.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/Documents/Backend/client/node_modules/.bin/npm
  Browsers:
    Chrome: 85.0.4183.83
    Firefox: 78.0.2
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: ^6.0.21 => 6.0.20 
    @storybook/addon-docs: ^6.0.21 => 6.0.20 
    @storybook/addon-links: ^6.0.21 => 6.0.20 
    @storybook/addon-storyshots: ^6.0.21 => 6.0.20 
    @storybook/addon-storysource: ^6.0.21 => 6.0.20 
    @storybook/addon-viewport: ^6.0.21 => 6.0.20 
    @storybook/addons: ^5.3.21 => 5.3.21 
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.21 => 6.0.20 
    @storybook/theming: ^5.3.21 => 5.3.21

附加上下文

在浏览器中没有看到这个问题