为什么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
相关·内容
当我在控制台中看到它时，它确实改变了数组，但不会重新渲染它。所有其它旋钮都工作正常。我使用一个条件来检查body是否有足够的length来呈现它。故事： import React from 'react'import { storiesOf } from '@storybook/react' text, selec
浏览 43提问于2020-09-03得票数 0
回答已采纳
1回答
我正在用故事簿构建一个有角度的应用程序。我希望我的故事有可控制的旋钮，但其中一些组件采用ng-content。我很难让这两个人一起工作，因为在中，使用Storybook将内容传递到组件中需要在故事中设置一个template。不幸的是，模板似乎基本上覆盖了Storybook的旋钮通过的道具。{
types: array('class', ['da
浏览 0提问于2020-03-31得票数 10
1回答
如何可视化回归测试故事簿的加号？
、、、、
我正在研究一种方法，用于在一个React项目中对近1000个组件进行可视化回归测试。我正在考虑使用Storybook和BackstopJS来实现它，因为很多组件已经在故事簿上实现了，我认为我可以最快地解决它。然后，自动提取童话场景，生成一个iframe.html查询的TOC，并将其交给BackstopJS来实现。这个方法看起来很管用，但有个问题。该项目中的大多数组件都是无状态的，操作和状态更改显然是分开的。因此，我使用手动检查状态<e
浏览 1提问于2019-03-22得票数 2
回答已采纳
1回答
我试图从@storybook/addon-knobs迁移到@storybook/addon-controls，我遇到了一个问题。Title.arg
浏览 2提问于2021-07-09得票数 4
我在使用故事书创建组件库时，遇到了这样的问题:我的组件有一个实现的ngOnChanges方法，当我从storybook控件传入值时，它不会运行。值从故事传递到组件，组件对标题进行可视化更改，但是，虽然值被传递给变量，但我的ngOnChanges方法不会被触发。这是我的故事书代码，在这里我传递的值：
import { moduleMetadata } from '@storybook
浏览 15提问于2022-01-31得票数 3
我创建了一个自定义的react组件。当在用户操作上更改复选框时，我能够获取复选框的状态。但是，当我调用组件并将检查状态设置为支柱时，我无法设置检查状态。<Checkbox onChange=()=>{} checked />这个问题只发生在故事簿上。当我创建一个旋钮检查，以改变状态，该功能不起作用。这是我的故事
浏览 4提问于2020-04-04得票数 1
我试图在同一个项目中集成和。我一直在跟踪和，但是其中一个步骤是将组件库发布到NPM和，这不是我想要的。我使用组件库( 文件夹)和存储在storybook文件夹中的Storybook对这些组件的审阅者配置了这个storybook。问题是，当我使用模板编译组件并在Storybook应用程序中复制dist文件夹并导入组件时，没有任何渲染。使用调整配置，我能够正确导入它，但是在应用时<em
浏览 1提问于2018-03-25得票数 18
3回答
角8与故事书6
、、、
在安装和启动故事书时获得以下错误。ERROR in /Users/username/angular-storybook/src/stories/Button.stories.tsTS2307: Cannot find module '@
浏览 6提问于2020-08-18得票数 6
回答已采纳
我正在尝试从jQuery示例中找出是否可以将滑块的当前值设置为出现在滑块旋钮上的文本。 $("#slider").slider();有没有办法做到这
浏览 1提问于2010-12-03得票数 1
1回答
我目前正在使用Storybook和Angular。在我的一个组件中，我似乎不能更改可观察对象的值。故事书上什么也没出现。 我尝试做of(true)来改变值，但即使没有它，它似乎也不起作用。我尝试检查该元素，但什么也没有，所以我假设它什么也没做。我的故事： stories.add('Loader', () => { template: `
浏览 9提问于2019-06-05得票数 7
我使用Jquery-Knob作为控制旋钮从数组中选择值，使用输入作为数组的索引，并将其他信息显示为标签。knobValue)); }我工作得很好，除了当我点击旋钮标签时有没有办法防止这种情况发生？用户应该能够通过鼠标/触摸来更改这些值。我尝试添加"readonly“，但它禁用了完成<
浏览 22提问于2017-03-05得票数 1
我已经用CRA配置了这个项目，我在package.json中将包更新为以下内容： "@storybook/addon-actions": "^6.4.22", "@storybook/addon-li
浏览 9提问于2022-05-02得票数 1
回答已采纳
2回答
我的问题是一个更一般的问题。使用滑块插件时，调用mySlider.set(步骤)会将旋钮移动到滑块上的正确步骤，但它会触发所有插件事件函数(onChange、onTick、onComplete)。这样做的问题是，您如何知道滑块旋钮位置是否由用户或对set()函数的调用更改？我本以为会有一个仅在鼠标松开旋钮时保留的函数，如果只是在代码中设置位置，则不会被调用。我有<
浏览 0提问于2009-08-28得票数 0
我正在使用Storybook列出项目中的所有图标。图标列表在下拉列表中使用。我需要加载SVG图标来解析成<van-icon />组件。我下面的代码正确地加载了一个图标，但问题是，当您更改下拉列表中的值时，组件不会更新。 对于我在这里尝试的东西，有没有更好的解决方案？似乎在Storybook文档中没有用于创建动态storybook组件的
浏览 37提问于2020-10-08得票数 0
该项目中的stories目录是( storybook目录)中的。在webpack更新为5.51.1版本时，我在运行npm run storybook时遇到了以下错误 '@storybook/addon-docs',
'@story
浏览 3提问于2021-08-25得票数 2
回答已采纳
1回答
如何在自己的窗口中正确地托管PitchShift音频单元插件？旋钮松开后，甚至在窗口关闭后，此
浏览 3提问于2011-08-06得票数 4
回答已采纳
1回答
我正在尝试为角8设置故事簿，但是当运行npm run storybook时，我会得到以下错误：
ERROR in /home/user/dev/storybook/src/stories/Button.stories.tsstorybook/angular/types-6-0'.但是，@storybook/angular是在package.json上安装的，而且
浏览 13提问于2021-06-21得票数 1
回答已采纳
2回答
我要做的是添加一个标签，跟随一个滑块旋钮，并显示旋钮的价值。我现在有一个垂直滑块和一个标签堆放在一个表格单元格内。我能够将标签定位到旋钮所在的位置，并正确地更新它的文本，但在移动旋钮时出现了问题。当我移动旋钮，我可以让标签跟随它，只要我不更新文本。但是如果我更新文本，标签就会在单元格中重新居中，直到旋钮停止移动，然后将自己放置在
浏览 2提问于2015-07-26得票数 1
回答已采纳
1回答
我正在从事一个项目，其中我使用聚合物与Firebase的组合。我有一个旋钮元素，它只是一个旋钮，它的值存储在Firebase中。旋钮的值由聚合物观察器观察，当该值更改时，会更新firebase值。问题如下:当值在一个地方更改时，它会更新firebase值。这将向所有其他位置发出一个更改事件。在其他地方，这会使元素中的值被设置，从而触发观察者。此观
浏览 0提问于2015-09-12得票数 0
我在Nx工作区中创建了一个角库来提供ui组件(ui-kit)。在这个图书馆里，我又加了一本故事簿，这本书运行得很好。现在，我还想包括Tailwind，因为组件使用它。我使用nx generate @nrwl/angular:setup-tailwind --project=ui-kit --buildTarget=build-storybook命令为该库设置顺风。createGlobPatternsForDependencies(__dirname), theme: { },
plugins:
浏览 13提问于2022-02-25得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
