在LWC中，JavaScript控制器拼接方法不适用于作为数组的@api变量

Question

在控制台中，this.unselectedPlayerList.length不显示，它将在使用拼接方法之前显示。所以我对拼接方法有疑问。

export default class MakeYourTeamChild extends LightningElement {
@api unselectedPlayerList=[];
SelectPlayer(event)
{ 
for(let index = 0 ; index < this.unselectedPlayerList.length; index++)
{
if(this.unselectedPlayerList[index].Name == event.target.title)
{
this.selectedPlayer = this.unselectedPlayerList[index].Name;
this.unselectedPlayerList.splice(index,1);
console.log('After Splice',this.unselectedPlayerList.length);
}
}
}
}

Answer 1

根据我的理解，我们不能使用splice((、push((和concat((方法更新或编辑@api变量。因此，您必须在另一个临时变量中复制@api变量，并在该临时变量上实现您的逻辑。将temp变量重新分配给@api变量。请查看以下代码以供参考：

export default class MakeYourTeamChild extends LightningElement {
@api unselectedPlayerList=[];
**let tempUnsltPlList = [];**
SelectPlayer(event)
{ 
for(let index = 0 ; index < this.tempUnsltPlList.length; index++)
{
if(this.tempUnsltPlList[index].Name == event.target.title)
{
this.selectedPlayer = this.tempUnsltPlList[index].Name;
this.tempUnsltPlList.splice(index,1);
console.log('After Splice',this.tempUnsltPlList.length);
}
}
**this.unselectedPlayerList = [...tempUnsltPlList];**
}
}

我希望它能帮助你。如果是，请将其标记为最佳答案。请随时联系我！

Answer 2

据我所知，您有一个父/子通信问题。一如既往，最好的方法是"；道具放下，活动向上"；。这将确保你容易理解如何&组件内的变量发生变化时，组件的内部子组件不会更改组件行为。

在您的案例中，unselectedPlayerList是由其父组件填充的子组件上的道具。这意味着父组件是数据的所有者，并控制该属性值。如果子组件想要修改这个值的值，它需要要求父组件这样做，这是通过发出一个事件告诉父组件该做什么来完成的。

export default class ParentComponent extends LightningElement {
unselectedPlayerList = []
handleSelectPlayer (event) {
const playerName = event.detail.playerName
const playerIndex = this.unselectedPlayerList.findIndex(player => player.Name === playerName)
const shallowPlayerList = [ ...this.unselectedPlayerList ]
shallowPlayerList.splice(playerIndex, 1)
this.unselectedPlayerList = shallowPlayerList
}
}

<template>
<c-child-component
unselected-player-list={unselectedPlayerList}
onselectplayer={handlePlayerSelect}
></c-child-component>
</template>

export default class ChildComponent extends LightningElement {
@api unselectedPlayerList = []
handleSelectPlayer (event) {
this.dispatchEvent(
new CustomEvent('selectplayer', {
detail: {
playerName: event.target.title,
}
})
)
}
}

如果您想使用@track装饰器，还有另一种编写父组件的方法。在LWC中，所有组件属性都是被动的，对象(数组、js对象(周围有一个小异常。更改对象的内部属性不会重新渲染视图，除非对该对象进行装饰。

您可以将此js用于父组件，以获得完全相同的结果。

export default class ParentComponent extends LightningElement {
@track unselectedPlayerList = []
handleSelectPlayer (event) {
const playerName = event.detail.playerName
const playerIndex = this.unselectedPlayerList.findIndex(player => player.Name === playerName)
this.unselectedPlayerList.splice(playerIndex, 1)
}
}

我不建议使用@track版本，因为它的性能更重，而且在任何情况下，在循环中执行操作时，对阵列的每次修改都会/可能触发视图更新。在第一个版本中，您可以确保视图只更新一次，这也让您可以更好地控制视图(或getter等依赖属性(的行为。

我希望这将帮助你，我邀请你阅读这些文章：

• 反应性
• 事件