从 React 中的数组中删除项目

Question

当我按下删除图标时，我希望删除该项目。但是有序列表开头的数字没有损坏。它是类组件。 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>

Answer 1

您需要使用array method like filter，它将根据回调返回一个新数组。

这样做应该可以：

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

   this.setState({
       list: newArr
   })

}

removeItem 接收的item 参数是您要删除的元素，filter 方法将返回一个新数组，其中包含所有没有您传递的元素文本的元素删除项目功能