Reactjs .filter() 函数在删除函数中创建循环 React

我有一个‘List’组件，它允许您将项添加到状态数组中，然后从状态显示它.然后，用户可以(或者应该能够)删除这些列表项.

该组件中有四个状态props :

• CurrentList:输入中要添加到列表数组中的内容
• SetCurrentList:用于更改输入内容的内容
• FullList:完整的数组列表
• SetFullList:用于将CurrentList内容添加到数组中，并移除

我使用.Filter()创建状态数组的副本，然后在此函数中设置状态:

const deleteFromList = (e) => {

        console.log("Delete button pressed")
        console.log(e)

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

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

        setFullList(filteredArray)
    }

然而，每次我执行这个函数时(即按下Delete按钮时)，它只会创建一个循环，并且前两个console.Logs只是重复执行.

这是完整的返回函数本身:

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

最重要的一点是底层的条件呈现，它判断状态数组是否为空，如果为空，则不显示任何内容.如果不是，则返回NULL.

任何建议都将不胜感激--不确定我在过滤器函数中做错了什么.