构建系统 CTA's/Callback 功能不起作用

Question

我正在开发 build/design 系统。一切正常。唯一的问题是当我发布我的包并尝试使用回调函数时。它没有正确地 return 我进入下一个屏幕所需的数据。

我试图在 CodeSandbox 中为您获取一个可重现的示例，但是，有一些小的 implications/errors 不允许我找到我正在与您交谈的特定错误大约现在。这似乎有其自身的问题。

那么，如何重现此错误？好吧，我们现在的包裹是 public。如上所述，您无法导入 CodeSandbox，因为它会在 React 版本上产生其他错误（如前所述，我稍后会处理......）。软件包名称是 @sandboxcommerceeng/react，您可能需要的 scss 软件包是 @sandboxcommerceeng/scss。继续并导入 CSS 文件。 @import '@sandboxcommerceeng/scss/lib/global.css'。然后在@sandboxcommerceeng/react包中，导入ECommercePlatformModal。下面的代码会给你一个可重现的错误。 Platforms 类型，也由 @sandboxcommerceeng/react

导出

const [showEcommerceModal, setShowEcommerceModal] = React.useState<boolean>(false);
const [url, setUrl] = React.useState<string>('');
const [selectedPlatform, setSelectedPlatform] = React.useState<keyof Platforms>();

<ECommercePlatformModal
  selectedPlatform={selectedPlatform}
  onSelectPlatform={(platform: keyof Platforms | undefined) =>
    setSelectedPlatform(platform)
  }
  showModal={showEcommerceModal}
  onCancel={() => setShowEcommerceModal(false)}
  okButtonProps={{ onClick: () => console.log(url) }} // ✴
  urlValidated={true}
  onUrlChange={(e: React.ChangeEvent<HTMLInputElement>) => {
    setUrl(e.target.value);
  }}
  url={url}
/>

✴：我无法使用回调从状态中获取 URL。我试过单独引用一个回调函数，然后从那里记录 URL 。我还尝试从回调中粘贴 URL。没有任何效果。

最终目标

这里的最终目标是拥有它，以便我能够将我的包应用到我的 React 应用程序中并具有包功能，即在包本身中实现的 javascript 代码，按预期工作。对这个特定组件的期望是能够 console.log url 并通过 callback 函数 okButtonProp{{onClick: () => console.log(url)}}

将其显示在包中

如果您还需要我什么，请告诉我。

Answer 1

你的答案是。（它可能只是一条评论，但还没有足够的声誉 :)）。

Answer 2

调试后，问题确实出在构建系统本身。在按钮组件上使用 React.memo 是罪魁祸首。由于 none 的道具实际上在组件上发生了变化，因此记忆没有按预期工作，因此它不是 re-rendering 带有新函数和变量的按钮组件被传递下来

我继续从备忘组件中删除了备忘，因为在这种情况下我看不到适合备忘的方法。

构建系统 CTA's/Callback 功能不起作用

Build System CTA's/Callback function not working

javascript

npm

typescript

reactjs