Question

我正在从api获取项目，然后通过复选框将其显示给用户。当用户单击某个项目时，该项目的值应添加到用户的项目数组中。同样，通过取消选中它，也应该将其从数组中删除...

我知道复选框，状态和数组背后的逻辑，但是我根本无法理解代码中出了什么问题。我的代码确实将项目添加到用户的数组中，但是当我尝试取消选中该项目时，除单击的项目以外的所有项目都被删除了...

class StepThree extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedItems: []
        };
    };

    handleCheckbox = e => {
        let { selectedItems } = this.state;
        const item = e.target.name;
        if (selectedItems.includes(item)) {
            const index = selectedItems.indexOf(item);
            this.setState({ selectedItems: selectedItems.splice(index, 1)});
        } else {
            selectedItems = selectedItems.concat(item);
            this.setState({ selectedItems: selectedItems });
        }
    };

    render() {
        const { categories } = this.props;
        const { selectedItems } = this.state;

        return (
            <Content>
                {categories.map(item => (
                    <label key={item.name}>
                        {item.name}
                        <Checkbox
                            name={item.name}
                            checked={selectedItems.includes(item.name)}
                            onChange={this.handleCheckbox}
                            />
                    </label>
                ))}
            </Content>
        );
    }
}

注意：很抱歉，我的代码示例很糟糕，我还是有新的反应。但是，如果您还有其他提示，请告知。

Answer 1

.splice（）将返回从数组中删除的项目。

如果您调用它，然后设置selectedItems状态，它将起作用：

if (selectedItems.includes(item)) { 
  const index = selectedItems.indexOf(item); 
  selectedItems.splice(index, 1); 
  this.setState({ selectedItems }); 
}

Answer 2

array.splice()从基础数组中删除所选项目，并返回已删除项目的数组。要解决此问题，您只需将this.setState({ selectedItems: selectedItems.splice(index, 1)});更改为this.setState({ selectedItems: selectedItems.filter(selectedItem => selectedItem === item)});

如何使用复选框向数组添加/删除项目？

2 个答案: