在React應用程序中使用.filter（）篩選出特定值

我目前正在構建一個組件，它有幾個方面。它允許您將項目列表添加到數組并動態顯示。然后，它允許您通過單擊某個項目的特定“刪除”按鈕來刪除該項目。

因此，我的組件中有四個狀態道具：

• 當前列表：用于決定要添加到完整列表數組中的內容
• 設置當前列表
• 完整列表：完整數組
• 設置完整列表

但是，如果數組中有兩個或多個相同的值，當您單擊其中一個值的刪除按鈕時，它會刪除這兩個值。

這是因為我只是在我的篩選函數中進行檢查，以確保傳遞給它的項等于傳遞給整個函數的值：

const deleteFromList = (e) => {

        let fullList = props.fullListState
        let setFullList = props.setFullListState

        let filteredArray = fullList.filter(item => item !== e)

        setFullList(filteredArray)
    }

我需要更改“filteredArray”變量，以便它檢查項的其他屬性（可能是數組中項的索引？）或者添加另一個簽入。

但我在這里找不出最好的方法。有人有什么建議嗎？

以下是供參考的完整組件：

const FormListInput = (props) => {

    const onChange = (e) => {
        props.setCurrentListState(e.target.value)
    }

    const addToList = () => {
        let setFullList = props.setFullListState
        let current = props.currentListState
        let setCurrent = props.setCurrentListState

        setFullList(full => [...full, current])
        setCurrent('')
    }

    const deleteFromList = (e) => {

        let fullList = props.fullListState
        let setFullList = props.setFullListState

        let filteredArray = fullList.filter(item => item !== e)

        setFullList(filteredArray)
    }

    return (
        <>
            <label className="form-list-label">{props.label}</label>
            <div className="form-list-input-container">
                <input className="form-list-input" type="text" onChange={onChange} value={props.currentListState} />
                <button className="form-list-add-button" onClick={addToList}>Add</button>
            </div>
            { props.fullListState.length === 0 ? null : props.fullListState.map(x => {
                return <div className="form-list-input-container" key={props.fullListState[x]}>
                    <p className="form-list-input-paragraph">{x}</p>
                    <button className="form-list-delete-button" onClick={() => deleteFromList(x)}>Delete</button>
                </div>
            }) }
        </>
    )
}