Html 从React中的数组中删除项

当我按下删除图标时，我希望该项目被删除。但有序列表开头的数字没有被打断。它是类组件。在removeItem方法中应该是什么

目前没有代码，因为我尝试了太多这样的事情，但什么都不起作用，所以我最终选择了console.logs。观察发生了什么，所以我删除了它

const ProfileSettings = observer(
class ProfileSettings extends React.Component {
    constructor(props) { 
        super(props)
        this.state = {
            expandIconPosition: 'left',
            buttonDisable: false,
            fetchedNotificationData: [],
            spinning: true,
            checkedA: true,
            checkedB: true,
            checkedC: true,
            list: [],
        };
    }



addListItem = () => {
        var test = this.state.list;
        
        test.push({ text: "",selected:false });            

        this.setState({
            list: test
        });

    }
removeItem = () => {
        ???????????
    }

<div style={{ backgroundColor: "#ffffff", borderRadius: 16, padding: 10, minHeight: 140, width: 406, borderRadius: 8, marginTop: 10, boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(0, 0, 0, 0.14)" }}>
                                    {(this.state.list.length !== 0) ? this.state.list.map((row) => (
                                        <div className="row" style={{borderRadius:4,marginLeft:5,marginRight:5,paddingLeft : 15, backgroundColor : (row.selected) ? "#1A32FF" : "#FFF"     }}>
                                            <span style={{ marginTop: 2,color:(row.selected) ? "#FFF" : "black" }}>{this.state.list.indexOf(row) + 1}.</span>
                                            <TextField InputProps={{
                                                style:{
                                                    color: row.selected ? 'white' : 'black'
                                                  },
                                                onClick:()=>this.changeRowSelectedOption(row)
                                            }}id="standard-basic" style={{ width: "50%",marginLeft:3 }}></TextField>

                                            <IconButton className={(row.selected) ? "selectedDeleteIconclass" : "deleteIconclass" }  style={{ float: "right" , marginLeft : 115,marginTop:-8}} onClick={() => this.removeItem()}>
                                                <Delete />
                                            </IconButton>
                                        </div>
                                    )) : null}
                                </div>
                            </div>

const ProfileSettings=观察者(
类ProfileSettings扩展了React.Component{
构造器（道具）{
超级（道具）
此.state={
expandIconPosition:'左'，
按钮化：false，
获取的通知数据：[]，
旋转：是的，
查克达：是的，
是的，
是的，
名单：[]，
};
}
addListItem=（）=>{
var测试=this.state.list；
test.push（{text:，selected:false}）；
这是我的国家({
列表：测试
});
}
removeItem=（）=>{
???????????
}
{（this.state.list.length！==0）？this.state.list.map（（行）=>(
{this.state.list.indexOf（row）+1}。
此.changeRowSelectedOption（行）
}}id=“standard basic”style={{width:50%”，marginLeft:3}>
this.removietem（）}>
))：null}

您需要使用一个函数，它将基于回调返回一个新数组

这样做应该会奏效：

removeItem = (item) => {
   var test = [...this.state.list];
   const newArr = test.filter(el => el.text !== item.text);

   this.setState({
       list: newArr
   })

}

---

removeItem接收的

项

参数是您试图删除的元素，

过滤器

方法将返回一个新数组，其中包含所有不包含传递给removeItem函数的元素文本的元素

test.push（

不要在React中改变状态…实际上我什么都不懂：（你是什么意思？你正在改变状态。除非你想要bug和非直观行为，否则不要这样做。好的，我明白了。那么我应该为removeItem做些什么？我该怎么做？听起来你可能想学习React的教程。我试过了。我添加了很多元素并删除了1，但它删除了整个列表，因为所有元素可能在text属性上具有相同的值