components 相关问题

让pendingdatafilterd = data.map((itm, i) => { const [status, setStatus] = useState(itm.status); if (状态 == '待处理') { 返回（ {itm.id}<... 让pendingdatafilterd = data.map((itm, i) => { const [status, setStatus] = useState(itm.status); if (status == 'pending') { return ( <div key={i} > <div>{itm.id}</div> <div>{status}</div> <button onClick={() => { setStatus('finished'); itm.status = 'finished'; setfinishedData(finishedData => [...finishedData, itm]); }} >finish</button> </div> ) } console.log('rendered') }）这是我代码的一部分，问题是每次我单击按钮时组件渲染数量都会增加我认为问题在于您在 useState() 函数中使用 map() 钩子，而没有为 pendingdatafilterd 数组中的每个项目提供唯一的键。 Key 用于标识列表中的每个元素，并确定是否需要重新渲染或是否应更新现有元素。如果数据数组中的每个项目都是唯一的，则可以使用 itm.id 作为键： let pendingdatafilterd = data.map((itm, i) => { const [status, setStatus] = useState(itm.status); if (status === 'pending') { return ( <div key={itm.id}> <div>{itm.id}</div> <div>{status}</div> <button onClick={() => { setStatus('finished'); itm.status = 'finished'; setfinishedData(finishedData => [...finishedData, itm]); }} > finish </button> </div> ); } console.log('rendered'); });

components rendering

回答 1 投票 0

VTable 使用问题：如何在表格中插入迷你图？

需要在表格列的单元格中显示反映一组数据动态的迷你折线图。如何在VTable中实现这种效果？

javascript html-table components

回答 1 投票 0

React Native 制作一个下载按钮，当文件保存在本地时会更改状态

React Native 中的下载按钮问题我正在尝试在 React Native 应用程序的卡片上创建一个下载按钮。这些按钮位于 FlatList 的卡片组件中。一切都正确渲染，我...

javascript react-native components

回答 1 投票 0

如何在 React 中更改 html 音频音乐？

我想使用 UseReduce 和 Usecontext 为我的音乐应用程序创建下一个和后退按钮，但有些问题。当我按下按钮时，音乐会改变，但音频不起作用。我的代码是这样的

javascript html reactjs react-hooks components

回答 1 投票 0

React Native 制作一个下载按钮，如果文件保存在本地，该按钮会更改状态

我正在尝试在 RN 应用程序的卡片上创建一个下载按钮。这些按钮位于平面列表的卡片组件中。一切都正确渲染并在正确的父级中，但在安装上我有每个按钮

javascript react-native components

回答 1 投票 0

在 Angular 中使用多个接口和单个公共字段

我有2个不同的组件，组件A使用模型A，组件B使用模型B。现在A有一个id，组件B应该使用该id来处理它的方法。所以如果我想在模式中使用相同的 id...

angular typescript interface components mode

回答 1 投票 0

如何从子级向上传递数据到任意数量的父级并每次更改它

如何将数据从最里面的子组件向上传递到任意数量的不同父组件，让每个父组件一直修改数据，直到最外面的子组件......

javascript components svelte sveltekit declarative

回答 1 投票 0

为什么使用 *ngIf 从 DOM 中删除元素不会破坏组件？

运行下面的代码时，我单击“切换”按钮在页面上呈现计数器并将其递增到 5，然后再次切换它，这会在计数器内容内的 div 上设置 ngIf...

javascript angular components lifecycle ngondestroy

回答 1 投票 0

Blazor InputDate 在强制更改时不更新 UI

我正在使用内置的 ASPNETCORE.Component.Forms InputDate，但是在选择日期时，它不会覆盖 UI，在分配另一个值时，它始终是 selectedDate。我正在使用内置的 ASPNETCORE.Component.Forms InputDate，但在选择日期时，它不会覆盖 UI；在分配另一个值时，它始终是 selectedDate。 <InputDate ValueExpression="@(()=>MyModel.TestDate)" Value="MyModel.TestDate" ValueChanged="@((DateTime value) => CheckDate(value))"/> private void CheckDate(DateTime selectedDate) { if (selectedDate < DateTime.Now) { MyModel.TestDate = selectedDate; } else { MyModel.TestDate = DateTime.Now; // Issue here UI does not updates } StateHasChanged(); } 使用 WebAssembly 5.0.7 我不太确定是什么导致了这种行为，但是，我回答是为 InputDate 位于 EditForm 内时提供解决方案。当 InputDate 处于 EditForm 时您可以使用 EditContext.NotifyFieldChanged 方法通知 EditContext 该字段已更改。 Telerik 片段 <EditForm EditContext="_editContext"> <InputDate ValueExpression="@(()=>MyModel.TestDate)" Value="MyModel.TestDate" ValueChanged="@((DateTime value) => CheckDate(value))"/> </EditForm> @code{ MyClass MyModel; EditContext _editContext; protected override void OnInitialized() { MyModel = new(){TestDate=DateTime.Now.AddDays(-2)}; _editContext = new EditContext(MyModel); } private void CheckDate(DateTime selectedDate) { if (selectedDate < DateTime.Now) { MyModel.TestDate = selectedDate; } else { MyModel.TestDate = DateTime.Now; _editContext.NotifyFieldChanged(FieldIdentifier.Create(() => MyModel.TestDate)); } } public class MyClass { public DateTime TestDate {get;set;} } }

c# blazor components blazor-webassembly webassembly

回答 1 投票 0

React.ReactNode 作为故事书中的参数

这是我的按钮组件类型从“反应”导入反应导出类型 ButtonProps = { 标签：字符串；颜色？：'主要' | '次要' | '第三'; 尺寸？：'移动' | '平板电脑' | '桌面'，

reactjs typescript components storybook system-design

回答 1 投票 0

意外的标记“endif”，需要文件结尾刀片组件

我正在尝试根据 laravel 中的路线动态更改类，但是使用以下方法：我正在尝试根据 laravel 中的路线动态更改类，但是使用这个： <x-ui.general.dashboard_link href="/dashboard/calendar" @if ("hello" == "hello") class="text-sm" @endif>CALENDAR</x-ui.general.dashboard_link> 我收到“语法错误，意外标记“endif”，期望文件结束”，所有 @if 和 @endif 均已关闭并具有正确的标签，这只发生在刀片组件标签上。为什么？在 Laravel 的 Blade 模板引擎中，当您传入 href 或 class 等属性或 prop 时，Blade 指令（如 @if、@else、@endif 等）在 Blade 组件内部不直接兼容。相反，您可以使用 PHP 的三元条件运算符作为解决方法，或者在组件之前设置一个变量： <x-ui.general.dashboard_link href="/dashboard/calendar" :class="('hello' == 'hello') ? 'text-sm' : ''">CALENDAR</x-ui.general.dashboard_link>

php laravel components laravel-blade

回答 1 投票 0

在具有属性的一个组件或用于变化的单独组件之间进行选择

我目前正在开发一个React库，其中一个组件（我们称之为TableCell）有多种变体，例如TextTableCell和NumberTableCell。我正在争论是否要实施...

reactjs components

回答 1 投票 0

components 相关问题

最新问题