开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么Storybook的数组旋钮在更改内容时没有更新？

Storybook是一个用于开发、测试和演示UI组件的工具。它提供了一个交互式的界面，可以在不依赖于应用程序的情况下独立测试和展示组件。

关于为什么Storybook的数组旋钮在更改内容时没有更新，可能有以下几个原因：

组件没有正确地响应属性的更改：在Storybook中，组件的属性可以通过参数进行配置。如果数组旋钮的内容没有更新，可能是因为组件没有正确地响应属性的更改。这可能是由于组件内部没有正确地监听属性的变化，或者属性的更改没有正确地触发组件的重新渲染。
组件没有正确地处理数组的变化：如果数组旋钮的内容是一个数组，并且在更改内容时没有更新，可能是因为组件没有正确地处理数组的变化。在JavaScript中，数组是引用类型，当数组的内容发生变化时，如果组件没有正确地处理这些变化，就无法更新显示。
Storybook的缓存机制：Storybook可能会对组件进行缓存，以提高性能。如果数组旋钮的内容没有更新，可能是因为Storybook缓存了组件的旧实例，并且没有正确地更新缓存。在这种情况下，可以尝试清除Storybook的缓存，或者重新启动Storybook来确保组件的更新。

为了解决这个问题，可以尝试以下几个步骤：

确保组件正确地响应属性的更改：检查组件内部是否正确地监听属性的变化，并在属性变化时触发组件的重新渲染。可以使用React的componentDidUpdate生命周期方法或React Hooks中的useEffect钩子来实现。
确保组件正确地处理数组的变化：如果数组旋钮的内容是一个数组，确保组件能够正确地处理数组的变化。可以使用JavaScript的数组方法（如push、pop、splice等）来修改数组，并确保组件能够正确地响应这些变化。
清除Storybook的缓存：如果问题仍然存在，可以尝试清除Storybook的缓存，或者重新启动Storybook来确保组件的更新。具体的清除缓存方法可以参考Storybook的文档或相关文档。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai_services
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

相关搜索:为什么在Flutter中使用setState时我的列表没有更新为什么在React Hooks中排序后数组没有更新？为什么在Teradata中使用SELECT *时没有显示任何内容？为什么我的<Select> html元素在更改其内容后不能正确更新？为什么我的数组值没有更新？线性回归为什么我的数组在observedobject更新时被清空了？为什么我的输入值在Redux状态改变时没有更新？为什么我的选项卡内容在单击时不会更改？为什么更改模型后ngFor中的模型没有更新？为什么没有更新数组的长度，导致索引越界错误？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Storybook 7 来了：迄今为止最大的更新

CSF3 迁移我们提供了一个自动将现有 stories 转换为 CSF3 语法的代码转换工具，以节省你升级的时间。但是，SB7 完全向下兼容 - 因此，如果你还没有准备好升级，你不需要做任何更改。...这样，你既可以在编写 stories 时进行类型检查和自动完成，又可以使用 markdown 方便地编写内容。...简单上手，请查看：样式插件：在 Storybook 中配置样式和主题数以百计的其他改进除了上述所有内容，Storybook 7 还包含了无数其他的改进和错误修复。...对于插件用户：所有 Storybook 的核心插件都已经更新，并可以在 Storybook 7 中使用。我们正在与社区合作，更新最受欢迎的插件。...当出现这种情况时，请在插件的 GitHub 存储库上开一个 Issue，并友好地要求作者将其插件更新为与 SB7 兼容。

4193 0

前端基建处理之组件库优化方案

（不同的开发的编辑器配置不一样，导致大家提交上来的代码五花八门）组件没有文档和预览（写公共组件的开发实现之后就没有花更多时间在文档和预览上，导致其他开发要使用组件的时候有上手成本，而且不方便熟悉这些公共组件的功能和使用...）没有提交规范（因历史原因，不少提交的commit message上面都是随便写，没有什么规范，也不方便根据commit信息判断改动的内容）无法保证改动不影响之前的一些功能（即无法保证能向下兼容，改动需要更多靠人工的方式来验证功能是否不影响之类的...解决环境变量问题 vue代码里面会有环境变量，但是在storybook的环境中这个环境变量是没有的，所以我们需要手动设置这个环境变量，保证我们的代码可以正常运行这时候我们需要一个包，我们安装dotEnv...-s" } } 自动升级版本我们需要在准备发版的时候，更新package.json中的版本号，生成changelog文件，提交更改和创建标签，这里我们需要用到第三方的工具包，这里用了standard-version...，原则上改动都是要向下兼容的，每次组件库更新理论上引用的项目都要跟着更新，验证下改动是否没问题，但是考虑到每次都要让各个项目来验证这种成本比较高，所以引入单元测试，组件的创建人在写完组件之后，顺便根据自己的场景补充好单元测试

2771 0

从 Styleguidist 迁移到 Storybook

Yelp，我们在使用 Styleguidist 时遇到了各种各样的问题，这些问题导致 React 开发体验欠佳：由于没有得到广泛的 Web 社区的支持，Styleguidist 缺少插件生态系统，因此...在使用大型包时，Styleguidist 不能很好地伸缩，因为它会为包中的每一个示例渲染一个独立的沙盒，导致初始化加载时间和热加载时间变长。...为什么选择 Storybook Storybook 是一个开源的 UI 开发和文档工具，过去几年在 Web 社区中越来越流行。...在 Styleguidist 中，开发人员经常需要为组件的每一个可视化排列创建一个示例，从而增加了维护负担（例如，在修改组件 API 后需要更新每一个示例）。...我们能够利用 Storybook 的特性，如按需加载，通过在编译时生成更小的包来提升性能，从而缩短沙盒的启动时间。

1.3K2 0

Sentry 开发者贡献指南 - 前端(ReactJS生态)

我们使用 action creator 函数（在 app/actionCreators 下）来分派 action。 Reflux store 监听 action 并相应地更新自己。...我们目前没有，但我们可以在构建过程中使用 babel 去除它。...要在本地运行 Storybook，请在 getsentry/sentry 存储库的根目录中运行 npm run storybook。它部署在某个地方吗？...仅在检查不存在时使用 queryBy... 仅当期望元素在可能不会立即发生的 DOM 更改后出现时才使用 await findBy......getByText - 在表单之外，文本内容是用户查找元素的主要方式。此方法可用于查找非交互式元素（如 div、span 和 paragraph）。

6.9K3 0

React 应用架构实战 0x2：构建和文档化组件

# Chakra UI 当我们为应用程序构建 UI 时，必须决定使用什么来为组件设置样式。此外，我们还必须考虑是从零实现所有组件还是使用带有预制组件的组件库。...集中主题配置非常有用，因为如果应用程序的品牌发生变化，它很容易使用和更改。例如，我们可以轻松地在一个地方更改主色值，并将其应用于整个应用程序，而无需进行任何其他更改。.../link"; # 使用 Storybook Storybook 是一个允许我们在隔离环境下开发和测试 UI 组件的工具。可以将其视为制作所有组件目录的工具，它非常适合用于记录组件。...使用 Storybook 的一些好处： Storybook 允许在隔离环境中开发组件，而无需重现应用程序的精确状态，从而使开发人员可以专注于他们正在构建的东西 Storybook 作为 UI 组件的目录...在 Storybook 中的展示方式。

8011 0

当前端基建任务落到你身上，该如何推动协作？

很多前端在接触到什么前端工程化，什么持续构建/集成相关知识时就犯怂。也有觉得这与业务开发无关，不必理会。...在项目中安装StoryBook(多项目时另起) 按官方文档标准，创建stories，并设定参数（同时也建议先写Jest测试脚本），写上必要的注释。为不同组件配置StoryBook控件，最后部署。...前端静态页开发完了，后端迟迟不给接口，因为没有接口文档，天天都得问。测试反馈的问题，在原型上没有体现。首先是原型方面：一定要看明白产品给的原型文档！！！多问多沟通，这太重要了。...在没有接口文档站点出现前，接口文档以word文档出现，辅以postman、http、curl等工具去测试。但仍然不够直观，维护起来也难。...然后是测试方面：为了避免测试提出一些无效的 bug，最好提前参与测试的用例评审。在实际开发中，如果有不合理功能需要修改，所有的修改都必须要求产品经理更新到 PRD 以及原型设计中。

1.2K1 0

当前端基建任务落到你身上，该如何推动协作？

很多前端在接触到什么前端工程化，什么持续构建/集成相关知识时就犯怂。也有觉得这与业务开发无关，不必理会。...在项目中安装StoryBook(多项目时另起) 按官方文档标准，创建stories，并设定参数（同时也建议先写Jest测试脚本），写上必要的注释。为不同组件配置StoryBook控件，最后部署。...前端静态页开发完了，后端迟迟不给接口，因为没有接口文档，天天都得问。测试反馈的问题，在原型上没有体现。首先是原型方面：一定要看明白产品给的原型文档！！！多问多沟通，这太重要了。...在没有接口文档站点出现前，接口文档以word文档出现，辅以postman、http、curl等工具去测试。但仍然不够直观，维护起来也难。...然后是测试方面：为了避免测试提出一些无效的 bug，最好提前参与测试的用例评审。在实际开发中，如果有不合理功能需要修改，所有的修改都必须要求产品经理更新到 PRD 以及原型设计中。

8272 0

2018 年前端开发五大趋势

即使是最受欢迎的那些，比如 Joomla 或 Wordpress，也会以需要及时更新或安全性不足的形式给它们的用户带来麻烦（经验丰富的黑客在攻击你的网站上未更新的关键插件时会遇到些麻烦，这是为了在以后的欺诈活动中使用它...主题也是许多内容管理系统的弱点。相反，开发者更喜欢使用单独的模块，这些模块可以在将来根据自己的需要重写。...这就是为什么静态网站在这些年变得如此流行。除了我们上面描述的明显的优势外，这种页面有一个重要的缺点 —— 它的内容不容易被编辑。...Storybook Storybook 是开发者在与 React 打交道过程中一个有用的开源工具。...特别是，得亏 StoryBook，你可以在独立的环境中设计和策划应用程序外的 UI 组件，并且在创建新的 UI 组件时它会发生变化。

2.9K4 0

每个前端都值得拥有自己的组件库

它允许你浏览组件库，并查看每个组件的不同状态，并交互地开发和测试组件，非常简单快捷，而且很多公司在使用，而且你可以开发不同技术栈的组件库，相当方便，而且拥有一套成熟的CIDI方案用我的话来说就是Storybook...会将这个数组目录下的文件加载到我们看见的组件库Index首页 addons表示我们使用到的插件 image-20211113154131712 开始编写一个简单的组件将我们的组件写在刚刚配置好的stories...6.添加 GitHub Action 部署 Storybook 现在我们的项目托管在 Github 仓库，我们能够使用持续集成 CI 服务完成 Storybook 自动化部署。...token: ${{ secrets.GITHUB_TOKEN }} 复制代码然后提交我们本次修改到远程仓库就行了，设置了GitHub action后，当推送代码时，你的 Storybook 将部署到...你可以在 Chromatic 的构建屏幕中找到所有已发布的 Storybook。

1.4K2 0

给普通人的图解示例

我曾经在某个地方读到过一句话，基本上有以下内容：在现代世界中，许多人的生活依赖于软件，例如控制大型商用客机飞行系统的软件，但软件开发领域大多不受监管。...当门打开时，电可以通过，当门关闭时，电被阻挡。由于门太小，不能手工建造，我不得不让人用电脑建造它们。根据我在电脑上输入的单词，它会代表我建造各种类型的这些小门。...在我们这里的比喻中，客户现在想要一个旋钮旋钮，可以旋转位于原始旋钮侧面的另一个旋钮，如下所示：坏代码需要添加一些偷工减料的组件，使整个系统更加摇摇欲坠并且容易出现故障。...好的代码只需要在新需求进来时稍微调整一下，简单地使用更长的橡胶带就可以解决这个问题。要求更改，旋钮需要转得慢一些！最后，我们的客户决定他们希望旋钮以不同的速度旋转。...另一方面，好的代码同样只需要稍微调整，在连接的旋钮侧使用更大的轮子：总结如上所述，当需求很简单时，好的代码通常看起来有点过头，但当客户需求发生变化时，好的代码就会真正发光发热。

2320 0

给普通人的图解示例

，基本上有以下内容：在现代世界中，许多人的生活依赖于软件，例如控制大型商用客机飞行系统的软件，但软件开发领域大多不受监管。...当门打开时，电可以通过，当门关闭时，电被阻挡。由于门太小，不能手工建造，我不得不让人用电脑建造它们。根据我在电脑上输入的单词，它会代表我建造各种类型的这些小门。...在我们这里的比喻中，客户现在想要一个旋钮旋钮，可以旋转位于原始旋钮侧面的另一个旋钮，如下所示：坏代码需要添加一些偷工减料的组件，使整个系统更加摇摇欲坠并且容易出现故障。...好的代码只需要在新需求进来时稍微调整一下，简单地使用更长的橡胶带就可以解决这个问题。要求更改，旋钮需要转得慢一些！最后，我们的客户决定他们希望旋钮以不同的速度旋转。...另一方面，好的代码同样只需要稍微调整，在连接的旋钮侧使用更大的轮子：总结如上所述，当需求很简单时，好的代码通常看起来有点过头，但当客户需求发生变化时，好的代码就会真正发光发热。

1582 0

从零开始，手摸手搭建前端组件库

的打包方式引入storybook 来支持项目的预览功能引入vue-loader15引入vue-markdown-loader等相关插件支持文档功能babel7为什么要升级到babel7 全局配置 babel.config.js...大家以后在做某个东西的时候，一定要先查查有没有工具。避免重复造轮子的同时，也可以避免很多不必要的错误)。优化代码与使用jsV8补丁做效能调校，编译速度更快。...webpack的配置所以只能使用storybook中提供的自定义babel和webpack配置基础设置都配置好了，在引入插件的时候发现插件不能用.............，更改了相关的配置并引入相关的插件相关的插件插件名称功能备注@storybook/addon-notes组件中添加notes，装饰story注释文本信息@storybook/addon-actions...让我们的组件库看起来不那么low?.......... 由于之前没有接触过类似的功能，于是漫漫的调研之路开始了。。。。

2.7K3 0

使用storybook管理React组件

使用storybook的插件功能 storybook的很多功能都是靠插件来实现的，大多数插件都需要提前注册，在页面中有一个单独的tab来对storybook进行增强。...测试UI组件 4.1 写测试用例的原因找到bug 新修改没有改变已有的接口和功能将测试用例作为文档 4.2 测试结构使用storyshots插件来实现，其核心是使用Jest，原理是每次生成一份DOM...PS：下次运行Jest时，只有DOM结构与上次完全一致测试才会通过，通常会有两种方法来解决这种情况：找到问题，修复不同；用新的DOM结构替换旧的。...首先，需要安装如下npm包： npm i -D enzyme enzyme-adapter-react-16 expect storybook-addon-specifications 在storybook...PS：测试不通过时，运行npm run jest:integration将强制更新原有快照。

3.3K2 0

storybook的介绍和使用比较火的响应式UI开发及测试环境

storybook是一套最近比较火的响应式UI 开发及测试环境。...可以可视化开发调试react，vue组件官网：https://github.com/storybooks/storybook 至于为什么叫storybook，应该是敏捷开发中的user story...下来带大家简单使用一下：首先全局安装storybook命令： npm i -g @storybook/cli 来到一个已存在的react项目，可以是由creat-react-app创建的在根目录执行.../basics/writing-stories/ // storiesOf应该是分组，每组添加一个个story // 修改内容页面会实时发生变化 storiesOf('Welcome', module)....add('to Storybook', () => ); // 使用action让storybook去记录log,可以在页面的

3K4 0

服务端来自火星，客户端来自金星，RSC 开发新思路

它是一个用于生成纯 HTML/CSS/JS 的静态构建，没有任何 Node 的影子！...注意：这个解决方案目前还不能在其他 Storybook React 框架（例如 react-vite、react-webpack5）中使用，因为它们没有像 Next.js 那样使用 canary 版的...在本文中，我们成功地在 Storybook 中为 RSC 编写了第一个 story，并展示了这一切是在幕后是如何实现的。...当前的模块模拟解决方案不仅冗长，且与 Storybook 的参数 / 控件也兼容的不够好。我们计划在后续的迭代中解决这两个问题，这也是为什么我们将此解决方案标记为实验性的原因。...本文是详细介绍 Storybook 8.0 的第一篇文章，在接下来的几个月里我们将发布更多的内容。

1611 0

PKS中国范儿十足的地址管理&微软情怀 | 温故知新

JZGKCHINA 工控技术分享平台 PKS的地址管理我们的户籍管理不可谓不严。新生儿出生后报户口时，户籍基本上成定局，以后若想更改，特别是从小城市迁移到大城市，需颇费一番周折。...连接到FTE网络上的所有设备，包括服务器、操作站和控制器，都需要在系统构建时提前设置好IP地址，因为他们连接在同一条网络上，所有IP地址的前三位需保持一致，只在第四位数字上有所区别。...IP地址与设备名称的对应关系，必须在服务器的HOST文件里进行登记注册，并且没有特殊情况不得随意更改。如果系统中添加了新的设备，也需要在HOST文件进行增补。...即每一个电脑设备有2个IP地址，在HOST文件里登记注册时，只需将A网的地址与设备名称进行登记即可，看来A网是户主，负责抛头露面的事情。...C300控制器作为在FTE网络上的一个设备，也必须设定IP地址，地址的前三位数字在软件上设置，第四个数字，在C300控制器的底板上通过旋钮来设置，如下图所示。

4902 0

玩转 Angular 环境变量

对于 “程序猿” 来说，在日常开发过程中，我们经常要与不同的开发环境打交道。在实际的项目的开发过程中，一般至少会有两个环境：开发环境和线上环境，这是很简单的情形。...environment.ts", "with": "src/environments/environment.mock.ts" } ] } 最后我们来测试一下，还记得在发布正式版本时...可能有的同学已经注意到了 --configuration 这个参数，通常参数说明，我们知道这个参数用于指定构建时所使用的配置文件。没错，要达到我们预期的结果，就要利用该参数。...不过在最终测试前，我们先来更新一下 main.ts 文件，增加一条输出日志： console.log(environment.baseUrl); 最后现在我们再来验证一下我们新创建的 test 环境是否生效...掌握了本文所涉及的内容，基本上已经可以满足大多数项目的需求，对于上述的内容如果有遗漏的地方欢迎大家补充哈。

3.2K2 0

storybook 编写stories的story基础语法

，并且右边工具栏可以自由更改它的属性，实时查看属性改变后的效果，还可以自动生成组件文档。...全局定义在根目录 .storybook/preview.js 下，会影响所有的 stories。...和 Parameters 一样，它也可以定义在全局/组件/story 三个层级，每个 Decorator 按定义顺序依次执行，从全局到 story。...例如，用一个额外的包裹每个 story 的组件渲染：// button.stories.tsimport { Meta, Story } from '@storybook/angular'...文章内容来源：Storybook 组件驱动开发（一）-- 基本使用 https://segmentfault.com/a/1190000039308365转载本站文章《storybook 编写stories

1.2K3 0

在 React 中使用 Storybook，构建强大的自定义 UI 组件

准备这是你开始使用Storybook时需要做的: 基本了解React、JavaScript和TypeScript 一个代码编辑器，比如Visual Studio code Node.js安装在您的机器上...如果你还没有一个React应用来添加Storybook，你可以先通过初始化Next.js应用来创建一个。...在Storybook中查看story 让我们重新查看Storybook实例，并导航到我们刚刚创建的组件。...在我们的Next.js的index.js的头部上方的jsx将呈现一个页面看起来像这样: 上面的例子展示了当故事位于同一个项目中时，如何从Storybook导入组件。...这将使您能够跨项目导入它们，但为了简单起见，我们在单个项目中构建了所有内容。现在我们已经有了一个可以运行的样式组件，让我们直接进入Storybook的特性，它允许你构建漂亮的ui。

9K1 0

试试 Storybook

storybook init 在项目里加了 2 个目录： .storybook 和 src/stories .storybook 下的是配置文件， src/stories 下的是组件。...这样，渲染内容就是自己控制的：而且有的组件不只是传入 props 就可以了，还需要一些点击、输入等事件。...storybook 支持写这类脚本：比如我写了找到内容为光光光的 button，点击，然后把它的内容改为东。...：这样，组件有没有通过测试用例，打开一看就知道了。...可以在 .storybook 下的 preview.tsx 里配置这个：总结写组件文档，我们一般都是用 Storybook。

2731 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭