故事书在收到MSW回复后重新读者的故事

Question

当我在故事书故事中触发后端的请求时，该故事在收到模拟服务工作者（MSW）的回应后重新渲染。如何防止重新渲染的发生？

这是一个故事：

我遵循为我的故事书故事设置MSW。

因此，我：

1. 安装 MSW 和 MSW-Storybook-addon
2. 生成的服务工作者： npx MSW INT static/
3. 更新了我的 preview.js 调用 initialize（）函数，添加了 mswdecorator ，并设置一些全局处理程序（例如， for “/api/cosites” ）

在故事书中打开一个组件时，该组件包含“/api/cansuster”的请求以下情况：

1. 最初MSW告诉我它已启用： [MSW]启用了启用。强>
2. 我单击一个按钮以手动将请求发送到“/api/usterces”
3. MSW告诉我此API请求已涵盖： [MSW] 15:21:20 GET/API /custerution/（200 ok）
4. 我在控制台上打印请求结果 - 可行，我可以看到预期的结果打印出来，
5. 但此后这个故事是无意间重新渲染的 - 这就是我想要抑制的。

FF告诉我：

与http：// localhost的连接：6006/__ webpack_hmr中断 页面加载时。

Chrome不给我这些信息。

这是设置：

package.json：

{
    ...
    "msw": {
        "workerDirectory": "static"
    }
}

main.js（Storybook）：

// imports ...    
const toPath = (filePath) => path.join(process.cwd(), filePath);

module.exports = {
  core: {
    builder: "webpack5",
  },
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
  features: {
    emotionAlias: false,
  },
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: custom.module.rules, // rules how to handle file extensions
      },
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          "@emotion/core": toPath("node_modules/@emotion/react"),
          "emotion-theming": toPath("node_modules/@emotion/react"),
        },
      },
    };
  },
  staticDirs: ["../path/to/static/"], // that's our public
};

以下是一些代码：

preview.js

export const parameters =  {
    ...
    msw: {
      handlers: [
        rest.get("/api/customers", (req, res, ctx) => {
          let customers = ...;
        
          return res(
            ctx.json({
              data: customers,
            })
          );
        }),
      ],
    },
  }

exkplestory.stories。 JSX：

export default {
  title: "Customers",
};

const getCustomers = () => {
    // ... set axios config etc.
    axios.get("/api/customers", config)
        .then((response) => response.data.data)
        .then((customers) => console.log(customers)); // yep, the customers gets printed!
};

export const ExampleStory = () => {
  return (
    <div>
      Simple demo story
      <button onClick={getCustomers}>Get customers</button>
    </div>
  );
};

节点模块：

• email-potection” class =“ __ cf_email__” data-cfemail =“ F39E8084B3C3DDDC7C1DDC0
• [emagy＆nbsp;