Javascript 使用$splice-React从状态中删除嵌套元素

我正在尝试从

组件

状态中删除一个元素。这就是该州感兴趣的部分的样子：

this.state({user:{
    ...
    instruments: [
        0: {
            name:"bass guitar",
            experience: "2"
        }
        1: {
            name:"drums",
            experience: "1"
        }
        ...
    ]
}})

当用户单击按钮时，我想从状态中删除该元素。使用以下代码时，数组中的第一个元素始终被删除，因为splice无法访问内部

名称

属性。有什么想法吗

Instrument.js

remove(){
    this.props.removeInstrument(this.props.name);
}

render(){
    return(
        <article className="instrument">
                <Col xs={12} sm={6}>
                    <div className="container-elements">
                        <span className="delete-element" onClick={this.remove.bind(this)}>x</span>
                        <h3>{this.props.name}</h3>
                        <p>{this.props.experience} years of experience</p>
                    </div>
                </Col>
        </article>
    );
}

    removeInstrument(val) {
    console.log('clicked on remove! ', val);
    this.setState({
        user: update(this.state.user, {instruments: {$splice: [[val,1]]}})
    })
}

// this is how I render the instrument
<div className="container-tags">
   {this.state.user.instruments.map((instrument, index) => {
       return <Instrument key={instrument.name} removeInstrument={this.removeInstrument} name={instrument.name} experience={instrument.experience}/>;
    })}
</div>

remove(){
    this.props.removeInstrument(this.props.index);
}

render(){
    return(
        <article className="instrument">
                <Col xs={12} sm={6}>
                    <div className="container-elements">
                        <span className="delete-element" onClick={this.remove.bind(this)}>x</span>
                        <h3>{this.props.name}</h3>
                        <p>{this.props.experience} years of experience</p>
                    </div>
                </Col>
        </article>
    );
}

removeInstrument(val) {
    console.log('clicked on remove! ', val);
    this.setState({
        user: update(this.state.user, {instruments: {$splice: [[val,1]]}})
    })
}

// this is how I render the instrument
<div className="container-tags">
   {this.state.user.instruments.map((instrument, index) => {
       return <Instrument key={instrument.name} removeInstrument={this.removeInstrument} name={instrument.name} experience={instrument.experience} index={index}/>;
    })}
</div>

remove（）{
this.props.demoveinstrument（this.props.name）；
}
render（）{
返回(
x
{this.props.name}
{这个.道具.经验}多年的经验

);
}

EditProfile.js

remove(){
    this.props.removeInstrument(this.props.name);
}

render(){
    return(
        <article className="instrument">
                <Col xs={12} sm={6}>
                    <div className="container-elements">
                        <span className="delete-element" onClick={this.remove.bind(this)}>x</span>
                        <h3>{this.props.name}</h3>
                        <p>{this.props.experience} years of experience</p>
                    </div>
                </Col>
        </article>
    );
}

    removeInstrument(val) {
    console.log('clicked on remove! ', val);
    this.setState({
        user: update(this.state.user, {instruments: {$splice: [[val,1]]}})
    })
}

// this is how I render the instrument
<div className="container-tags">
   {this.state.user.instruments.map((instrument, index) => {
       return <Instrument key={instrument.name} removeInstrument={this.removeInstrument} name={instrument.name} experience={instrument.experience}/>;
    })}
</div>

remove(){
    this.props.removeInstrument(this.props.index);
}

render(){
    return(
        <article className="instrument">
                <Col xs={12} sm={6}>
                    <div className="container-elements">
                        <span className="delete-element" onClick={this.remove.bind(this)}>x</span>
                        <h3>{this.props.name}</h3>
                        <p>{this.props.experience} years of experience</p>
                    </div>
                </Col>
        </article>
    );
}

removeInstrument(val) {
    console.log('clicked on remove! ', val);
    this.setState({
        user: update(this.state.user, {instruments: {$splice: [[val,1]]}})
    })
}

// this is how I render the instrument
<div className="container-tags">
   {this.state.user.instruments.map((instrument, index) => {
       return <Instrument key={instrument.name} removeInstrument={this.removeInstrument} name={instrument.name} experience={instrument.experience} index={index}/>;
    })}
</div>

removeInstrument（val）{
log（'单击删除！'，val）；
这是我的国家({
用户：更新（this.state.user，{instruments:{$splice:[[val，1]]]}）
})
}
//这就是我渲染乐器的方式
{this.state.user.instruments.map（（instrument，index）=>{
返回；
})}

您可以使用数据的

索引

，而不是使用

名称

Instrument.js

remove(){
    this.props.removeInstrument(this.props.name);
}

render(){
    return(
        <article className="instrument">
                <Col xs={12} sm={6}>
                    <div className="container-elements">
                        <span className="delete-element" onClick={this.remove.bind(this)}>x</span>
                        <h3>{this.props.name}</h3>
                        <p>{this.props.experience} years of experience</p>
                    </div>
                </Col>
        </article>
    );
}

    removeInstrument(val) {
    console.log('clicked on remove! ', val);
    this.setState({
        user: update(this.state.user, {instruments: {$splice: [[val,1]]}})
    })
}

// this is how I render the instrument
<div className="container-tags">
   {this.state.user.instruments.map((instrument, index) => {
       return <Instrument key={instrument.name} removeInstrument={this.removeInstrument} name={instrument.name} experience={instrument.experience}/>;
    })}
</div>

remove(){
    this.props.removeInstrument(this.props.index);
}

render(){
    return(
        <article className="instrument">
                <Col xs={12} sm={6}>
                    <div className="container-elements">
                        <span className="delete-element" onClick={this.remove.bind(this)}>x</span>
                        <h3>{this.props.name}</h3>
                        <p>{this.props.experience} years of experience</p>
                    </div>
                </Col>
        </article>
    );
}

removeInstrument(val) {
    console.log('clicked on remove! ', val);
    this.setState({
        user: update(this.state.user, {instruments: {$splice: [[val,1]]}})
    })
}

// this is how I render the instrument
<div className="container-tags">
   {this.state.user.instruments.map((instrument, index) => {
       return <Instrument key={instrument.name} removeInstrument={this.removeInstrument} name={instrument.name} experience={instrument.experience} index={index}/>;
    })}
</div>

remove（）{
this.props.demoveinstrument（this.props.index）；
}
render（）{
返回(
x
{this.props.name}
{这个.道具.经验}多年的经验

);
}

EditProfile.js

remove(){
    this.props.removeInstrument(this.props.name);
}

render(){
    return(
        <article className="instrument">
                <Col xs={12} sm={6}>
                    <div className="container-elements">
                        <span className="delete-element" onClick={this.remove.bind(this)}>x</span>
                        <h3>{this.props.name}</h3>
                        <p>{this.props.experience} years of experience</p>
                    </div>
                </Col>
        </article>
    );
}

    removeInstrument(val) {
    console.log('clicked on remove! ', val);
    this.setState({
        user: update(this.state.user, {instruments: {$splice: [[val,1]]}})
    })
}

// this is how I render the instrument
<div className="container-tags">
   {this.state.user.instruments.map((instrument, index) => {
       return <Instrument key={instrument.name} removeInstrument={this.removeInstrument} name={instrument.name} experience={instrument.experience}/>;
    })}
</div>

remove(){
    this.props.removeInstrument(this.props.index);
}

render(){
    return(
        <article className="instrument">
                <Col xs={12} sm={6}>
                    <div className="container-elements">
                        <span className="delete-element" onClick={this.remove.bind(this)}>x</span>
                        <h3>{this.props.name}</h3>
                        <p>{this.props.experience} years of experience</p>
                    </div>
                </Col>
        </article>
    );
}

removeInstrument(val) {
    console.log('clicked on remove! ', val);
    this.setState({
        user: update(this.state.user, {instruments: {$splice: [[val,1]]}})
    })
}

// this is how I render the instrument
<div className="container-tags">
   {this.state.user.instruments.map((instrument, index) => {
       return <Instrument key={instrument.name} removeInstrument={this.removeInstrument} name={instrument.name} experience={instrument.experience} index={index}/>;
    })}
</div>

removeInstrument（val）{
log（'单击删除！'，val）；
这是我的国家({
用户：更新（this.state.user，{instruments:{$splice:[[val，1]]]}）
})
}
//这就是我渲染乐器的方式
{this.state.user.instruments.map（（instrument，index）=>{
返回；
})}

a）传递索引并按索引而不是按名称删除，b）使用

filter

按名称删除元素，即

instruments:this.state.user.instruments.filter（instrument=>instrument.name！==val）