如何在React中使用Filter（）控制JSX组件？

Question

我目前正在使用返回JSX的儿童组件。

//PARENT COMPONENT

import ApprovalTableElement from './E_Approval_Element.js';


    //JSX of E_Approval_Element.js
    const [approvalElement, setApprovalElement] = useState([ApprovalTableElement]);

    //Add one more approval column
    const addApprovalSpace = () => {
        setApprovalElement([...approvalElement, ApprovalTableElement]);
    };

    return (
        <div className={styles['EApprovalWriteDiv']}>
            <div className={styles['authDiv']}>
                {approvalElement.map((element, index) => (
                     <button>DELETE ONE APPROVAL SECTION</button>
                    <ApprovalTableElement index={index} />
                ))}
            </div>
        </div>
    );
};

export default E_Approval_Write;

//CHILD COMPONENT

function ApprovalTableElement() {

    return (
        <>
            <table className={styles['approvalTable']}>
                <tbody className={styles['approval']}>
                    <tr className={styles['name']}>
                        <th>
                            <select style={{ marginLeft: 10 }}>
                                <option>선택</option>
                                <option>결재자</option>
                                <option>합의자</option>
                            </select>
                        </th>
                    </tr>
                    <tr className={styles['signature']}>
                        <td>
                            <div>SIGN</div>
                        </td>
                    </tr>
                    <tr className={styles['name']} onClick={memberModalTrigger}>
                        <td>
                            <Typography variant='button' display='block'>
                            </Typography>
                        </td>
                    </tr>
                </tbody>
            </table>
        </>
    );
}

export default ApprovalTableElement;

使用此代码，我要做的是使用

{approvalElement.map((element, index) => (
   <button>DELETE ONE APPROVAL SECTION</button>
   <ApprovalTableElement index={index} />
))}

此按钮，删除选定的ApplovalTableTableElement。

现在，我有这个UI。当我单击 +按钮时，我会不断添加组件。但是，当我单击删除按钮时，附加到按钮的表应消失。但不是其他。

我所知道的只是组件的索引，所以我真的在如何使用Filter（）删除目标组件时感到困惑。

或者，我应该在子组件内添加按钮标签而不是父组件吗？

，如果我可以做我想处理此代码的工作，请告诉我如何正确设置代码使事情成为可能。谢谢你！

Answer 1

只需选择那些与您删除的ID不同的ID，

const removeApprovalSpace = (id) => {
  setApprovalElement(items => items.filter(item => item.id !== id));
};
//usage
<button onClick={() => removeApprovalSpace(id)}>Remove</button>

如果您没有ID，则可以使用索引

const removeApprovalSpace = (index) => {
  setApprovalElement(items => items.filter((item, i) => i !== index));
};
//usage
<button onClick={() => removeApprovalSpace(index)}>Remove</button>