Javascript 在React中从数组中删除项时遇到问题

加载页面后，将从我的API检索数据并将其存储在数组中。然后，它会为数组中的每个对象显示一个按钮，并相应地显示标题

接下来需要做的是，当我单击一个按钮时，该按钮消失，关联项从数组中移除。那部分不起作用。该按钮正在注册单击，并且该功能正在运行。但是，按钮并没有消失，当我再次记录阵列时，阵列似乎没有改变。我不明白为什么。有人能帮我发现这个问题吗

这是我的代码，讨论的部分是“handleAddPolicy”功能：

import React, { Component, Fragment } from 'react';
import PolicyButton from './PolicyButton/PolicyButton';

class Handbook extends Component {

    constructor(props){
        super(props);

        this.state = {
            clients: [],
            policies: [],
            client: 'Choose Client',
            logo: '',
            color1: '#000',
            color2: '#fff'
        };
        
    }

    componentDidMount() {
        fetch('/api/themes/all')
            .then(res => res.json())
            .then((result) => {
                this.setState({ clients: result });
                console.log(result);
            })
            .then(
                fetch(`/api/policy/all`)
                    .then(res => res.json())
                    .then((result) => {
                        this.setState({ policies: result });
                        console.log(result);
                    })
            );
    }

    handleAddPolicy = policyId => {
        console.log(`button clicked`);
        const policies = this.state.policies.filter(policy => policy.id !== policyId);
        this.setState({ policies: policies});
        console.log(this.state.policies);
    }

    render(){
        return(
            <Fragment>
                {/* <ClientPicker /> */}
                <div className='buttons'>
                    {this.state.policies.map(policy => (
                        <PolicyButton key={policy.id} policy={policy.policy} onAddPolicy={this.handleAddPolicy} />
                    ))}
                </div>
            </Fragment>
        );
    }
}

export default Handbook;

import React，{Component，Fragment}来自'React'；
从“./PolicyButton/PolicyButton”导入PolicyButton；
类手册扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
客户：[]，
政策：[]，
客户端：“选择客户端”，
徽标：“”，
颜色1:“#000”，
颜色2:“#fff”
};
}
componentDidMount（）{
获取（'/api/themes/all'）
.then（res=>res.json（））
。然后（（结果）=>{
this.setState（{clients:result}）；
控制台日志（结果）；
})
.那么(
获取（`/api/policy/all`）
.then（res=>res.json（））
。然后（（结果）=>{
this.setState（{policies:result}）；
控制台日志（结果）；
})
);
}
HandLeadPolicy=policyId=>{
log（`button clicked`）；
const policies=this.state.policies.filter（policy=>policy.id！==policyId）；
this.setState（{policies:policies}）；
log（this.state.policies）；
}
render（）{
返回(
{/*  */}
{this.state.policies.map（policy=>(
))}
);
}
}
出口违约手册；

下面是我的按钮的代码，如果有帮助，单击该按钮后应该会消失：

import React, { Component } from 'react';
import styled from 'styled-components';

class PolicyButton extends Component {
    
    state = {
        id: this.props.id, 
        policy: this.props.policy
    }

    render(){
        return(
            <button onClick={() => this.props.onAddPolicy(this.props.id)}>{this.props.policy}</button>
        )
    }
}

export default PolicyButton;

import React，{Component}来自'React'；
从“样式化组件”导入样式化；
类PolicyButton扩展组件{
状态={
id:this.props.id，
策略：this.props.policy
}
render（）{
返回(
this.props.onAddPolicy（this.props.id）}>{this.props.policy}
)
}
}
导出默认策略按钮；

在呈现

policy按钮时，您错过了
id
prop

            <Fragment>
                {/* <ClientPicker /> */}
                <div className='buttons'>
                    {this.state.policies.map(policy => (
                        <PolicyButton
                          key={policy.id}
                          /* This is what you missed */
                          id={policy.id}
                          policy={policy.policy}
                          onAddPolicy={this.handleAddPolicy}
                        />
                    ))}
                </div>
            </Fragment>


{/*  */}
{this.state.policies.map（policy=>(
))}
setState是异步的，因此它只会在清除fn堆栈（以及更多内容）后更改状态。您还没有将id作为propAh传递，好的，这已经解决了部分问题。按钮正在消失，项目正在从阵列中删除。但这不是正确的项目。它们似乎不是基于我的数组中的实际项目id号。我不知道它是如何决定哪一个被移除的。它正在为单击的按钮记录正确的id。但是从数组中删除的内容几乎是随机的，在所有按钮都消失后，数组中还剩下一个。而且，在
setState
调用之后立即记录控制台日志状态将只记录当前状态，而不是排队的下一个状态。啊，好的，这已经解决了部分问题。按钮正在消失，项目正在从阵列中删除。但这不是正确的项目。它们似乎不是基于我的数组中的实际项目id号。我不知道它是如何决定哪一个被移除的。