Javascript 基于其中一个删除数组中的对象'；s属性

我正在尝试操作状态中的一组组件，我希望能够根据每个组件的

id

属性删除它们。每次创建组件时，动态传递

id

时，我无法确定如何定位组件

constructor(props) {
    super(props);
        this.state = {
        counters: 0, // counters count    
        countersArr: []
    }}

render() {

        let countersArrCop = this.state.countersArr;
        let counterIndex;

    onAddCounterHandler = () => {

        const id = new Date().getTime()
        console.log(this.state.countersArr.length)
        console.log(counterIndex)
        countersArrCop.push( // push new counter to the counters holder
            <Counter 
                style={styles.countersContainer} 
                key={id}
                id={id}
                remove={() => removeCounterHandler(id)}
            />
        )

        this.setState({
            countersArr: countersArrCop,
        })
        console.log(id)
    }

    // remove counter
    removeCounterHandler = (id) => {
        console.log(id)
        const countersArr = this.state.countersArr.slice(); // Local copy to manipulate
        this.setState({ countersArr: countersArr.filter(counter => counter.id !== id) });
      }

        return (

            <View style={styles.container}>

                <View style={styles.addBtnContainer}>
                    <Button 
                        onPress={onAddCounterHandler} 
                        title={'add Counter'}
                    />
                </View>

                {
/* return each individual counter from the array by using 'map' */
}
                <View style={styles.container}> {
                    this.state.countersArr.map((counter) => {
                        return counter;
                    })
                }
                </View>

            </View>
        );

构造函数（道具）{
超级（道具）；
此.state={
计数器：0，//计数器计数
副手：[]
}}
render（）{
让countersharrcop=this.state.countersharr；
让我们反向索引；
onAddCounterHandler=（）=>{
const id=new Date（）.getTime（）
console.log（this.state.countersharr.length）
console.log（计数器索引）
countersharrcop.push（//将新计数器推到计数器支架上
removeCounterHandler（id）}
/>
)
这是我的国家({
副手，副手，副手，
})
控制台日志（id）
}
//移除计数器
removeCounterHandler=（id）=>{
控制台日志（id）
const countersharr=this.state.countersharr.slice（）；//要操作的本地副本
this.setState（{countersharr:countersharr.filter（counter=>counter.id！==id）}）；
}
返回(
{
/*使用“映射”返回数组中的每个计数器*/
}
{
this.state.countersharr.map（（计数器）=>{
返回计数器；
})
}
);

---

更新了代码***id==未定义。。为什么？

您可以执行如下功能：

removeCounterHandler (id) {
  const countersArr = this.state.countersArr.slice(); // Local copy to manipulate
  this.setState({ countersArr: countersArr.filter(counter => counter.id !== id) });
}

---

您可以执行如下功能：

removeCounterHandler (id) {
  const countersArr = this.state.countersArr.slice(); // Local copy to manipulate
  this.setState({ countersArr: countersArr.filter(counter => counter.id !== id) });
}

---

首先，在

render（）中放置逻辑代码是非常不鼓励的。渲染只应渲染，任何其他任务都应位于它们应该位于的位置。请注意，每次组件重新渲染时，渲染块中的所有代码都会被调用。因此，这些处理程序应该声明为组件类中的方法，并具有来自渲染的适当挂钩，例如
onClick（）
并且不要忘记像这样绑定
this
上下文，以便在方法中保留对组件类的
this
引用：



第二，当您只需将ID存储在一个数组中时，您正在使用一个组件数组来膨胀您的状态：

onAddCounterHandler（）{
const{countersharr}=this.state
const id=new Date（）.getTime（）
这是我的国家({
副手：[…副手，id]，
})
}

然后只需映射该数组并按如下方式返回组件：

最后，永远不要在渲染中使用setState

试试看，让我知道它是怎么回事：）
首先，在
render（）中放置逻辑代码是非常不鼓励的。渲染只应渲染，任何其他任务都应位于它们应该位于的位置。请注意，每次组件重新渲染时，渲染块中的所有代码都会被调用。因此，这些处理程序应该声明为组件类中的方法，并具有来自渲染的适当挂钩，例如
onClick（）
并且不要忘记像这样绑定
this
上下文，以便在方法中保留对组件类的
this
引用：



第二，当您只需将ID存储在一个数组中时，您正在使用一个组件数组来膨胀您的状态：

onAddCounterHandler（）{
const{countersharr}=this.state
const id=new Date（）.getTime（）
这是我的国家({
副手：[…副手，id]，
})
}

然后只需映射该数组并按如下方式返回组件：

最后，永远不要在渲染中使用setState

试试看，让我知道它是如何运行的：）
this.state.countersharr=this.state.countersharr.filter（c=>c.id！==id）
你不能像这样操纵状态。对不起，你是对的。但你明白了。使用filter函数获取新数组，然后使用
setState（）
this.state.countersharr=this.state.countersharr.filter（c=>c.id！==id）
您不能像这样操作状态。对不起，您是对的。但你明白了。使用filter函数获取新数组，然后使用
setState（）
确定我获取
id
和all but is仍然不会更新状态和删除元素确定我获取
id
和all but is仍然不会更新状态和删除元素谢谢！我甚至不知道我做了什么，但它的工作！！！如果您不介意解释什么是
const{countersharr}=this.state
和
countersharr:[…countersharr，id]
的意思以及我如何不必将state设置在顶部？（正如你所看到的，我还没有反应过来）再次感谢你！！我的朋友叫对象分解，那个叫扩散算子。其思想是，必须在调用
render（）
之前完成数据，以避免在
render（）中调用
setstate（）
。这是一个反模式的问题，必须避免。我会读这篇文章，因为我不知道对象解构是什么意思！再次感谢你，我已经和它斗争了两天了，每次我都有其他的错误。你的解决方案是完美的。！谢谢你！我甚至不知道我做了什么，但它的工作！！！如果您不介意解释什么是
const{countersharr}=this.state
和
countersharr:[…countersharr，id]
的意思以及我如何不必将state设置在顶部？（正如你所看到的，我还没有反应过来）再次感谢你！！我的朋友叫对象分解，那个叫扩散算子。其思想是，必须在调用
render（）
之前完成数据，以避免在
render（）中调用
setstate（）
。这是一个反模式的问题，必须避免