Question

不确定如何在标题中正确说出这个问题。

方案： React app显示3个元素（下拉列表）的数组，默认情况下已关闭。

I open the second dropdown:
0: state.isOpen: closed
1: state.isOpen: open
2: state.isOpen: closed

I remove the FIRST element of the array:
0: state.isOpen: closed
1: state.isOpen: open

很奇怪，因为我希望新的第一个元素打开而第二个元素被关闭。看起来状态不遵循元素（例如，第二元素状态将在移除后进入新的第二元素状态）。我尝试不改变数组，而是创建一个新数组并使用它来设置状态，但结果相同。

我希望新的[0]打开，[1]关闭。我怎么做？感谢。

//Accounts.js:
accounts.map( () => { return <Account/>})
removeAccount = () => {
    let accounts = this.state.accounts.map(item => return item)
    accounts.splice...
    this.setState({accounts: accounts})
}

//Account.js:
state.isOpen
removeAccount = this.props.removeAccount

Answer 1

我认为您没有正确克隆阵列：

removeAccount = () => {
    let accounts = [...this.state.accounts]; // Cloning first
    accounts = accounts.map(item => return item) // Do your mappings here
    accounts.splice... // Do your modifications here
    this.setState({accounts: accounts}); // Set the new state 
}

Answer 2

您可以利用Array.prototype.slice() return array排除first element的全新removeAccount = () => { return this.setState((state) => {accounts: [...state.accounts.slice(1)]}) }，而不会触及任何其他内容。

请参阅下面的实例。

from django.db import models

class Foo(models.Model):
     name = models.CharField(max_length=100, null=False)

     class Meta:
         ordering = ("name")

Reactjs：删除数组元素，元素状态不遵循

2 个答案: