在 React 中无法从数组中删除项目

Question

加载页面后，从我的 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 } 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;

Answer 1

渲染 PolicyButton 时错过了 id 属性

            <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>