过滤器功能（过滤器）的第一次更改不会触发 onChange [重复]答案

【问题标题】：onChange dosent get triggered on first change for filter function (filterFn) [duplicate]过滤器功能（过滤器）的第一次更改不会触发 onChange [重复]
【发布时间】：2022-01-23 18:12:35
【问题描述】：

过滤器函数filterFn第一次更改时触发onChangedosent，changeDepartmentIdFilter函数dosent在第一次更改示例时更改departmentIdFilter的值

如果我写

苹果

它仅用于控制台

应用

这里是代码：

const Department = () => {


    let [department, setDepartment] = useState([])
    let [filteredDepartment, setFilteredDepartment] = useState([])
    
    let [values, setValues] = useState({
        modalTitle: '',
        departmentName: '',
        departmentId: 0,

        departmentIdFilter: "",
        departmentNameFilter: "",
        departmentsWithoutFilter: [],
    })

    useEffect (() => {
        getDepartments()
    }, [])


    let filterFn = () =>{
        let departmentIdFilter = values.departmentIdFilter
        let departmentNameFilter = values.departmentNameFilter


        let filteredData = filteredDepartment.filter(
            function(el){
                return el.DepartmentId.toString().toLowerCase().includes(
                    departmentIdFilter.toString().trim().toLowerCase()
                ) &&
                el.DepartmentName.toString().toLowerCase().includes(
                    departmentNameFilter.toString().trim().toLowerCase()
                )

            }
        )
        setDepartment(filteredData)

    }


    let changeDepartmentIdFilter = (e) => {
        setValues({...values, 'departmentIdFilter': e.target.value})
        filterFn()
    }
    
    
    let changeDepartmentNameFilter = (e) => {
        console.log(e.target.value)
        setValues({...values, 'departmentNameFilter': e.target.value})
        filterFn()
    }


    let getDepartments = async () => {
        let response = await fetch (variables.API_URL + "department")
        let data = await response.json()

        setDepartment(data)
        setFilteredDepartment(data)
    }

  
    return (
        <div>

            <button type="button" className="btn btn-primary m-2 float-end" data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={() => addClick()}>Add Department</button>

            <table className="table table-striped">
                <thead>
                    <tr>
                        <th>
                            <input className="form-control m-2" onChange={(e) => {changeDepartmentIdFilter(e)}} placeholder='Filter' />
                            DepartmentId
                        </th>
                        <th>
                            <input className="form-control m-2" onChange={(e) => {changeDepartmentNameFilter(e)}} placeholder='Filter' />
                            DepartmentName
                        </th>
                        <th>
                            Options
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {department.map((dep) => 

                        <tr key={dep.DepartmentId}>
                            <td>{dep.DepartmentId}</td>
                            <td>{dep.DepartmentName}</td>
                            <td>
                                

                                <button type="button" className="btn btn-light mr-1" data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={() => editClick(dep)}>
                                    
                                </button>


                                <button type="button" className="btn btn-light mr-1" onClick={() => deleteClick(dep.DepartmentId)}>
                                    
                                </button>

                            </td>
                        </tr>
                        )}
                </tbody>
            </table>

            <div className="modal fade" id="exampleModal" tabIndex="-1" aria-hidden="true">
                <div className="modal-dialog modal-lg modal-dialog-centered">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title">{values.modalTitle}</h5>

                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>

                        </div>

                        <div className="modal-body">
                            <div className="input-group mb-3">
                                <span className="input-group-text">Department Name</span>
                                <input name = 'departmentName' type="text" className="form-control" value={values.departmentName} onChange={(e) => {changeDepartmentName(e)}} />
                                {/* <input type="text" className="form-control" value={departmentName} onChange={changeDepartmentName} /> */}
                            </div>

                            {values.departmentId == 0 ?
                                <button type="button" className="btn btn-primary float-start" onClick={() => createClick()}>Create</button> :
                                null
                            }

                            {values.departmentId != 0 ?
                                <button type="button" className="btn btn-primary float-start" onClick={() => updateClick()}>Edit</button> :
                                null
                            }

                        </div>

                    </div>
                </div>
            </div>

        </div>
    )
}

export default Department

只有相关代码的简化代码：

const Department = () => {


let [department, setDepartment] = useState([])
let [filteredDepartment, setFilteredDepartment] = useState([])

let [values, setValues] = useState({
    modalTitle: '',
    departmentName: '',
    departmentId: 0,

    departmentIdFilter: "",
    departmentNameFilter: "",
    departmentsWithoutFilter: [],
})

useEffect (() => {
    getDepartments()
}, [])


let filterFn = () =>{
    let departmentIdFilter = values.departmentIdFilter
    let departmentNameFilter = values.departmentNameFilter


    let filteredData = filteredDepartment.filter(
        function(el){
            return el.DepartmentId.toString().toLowerCase().includes(
                departmentIdFilter.toString().trim().toLowerCase()
            ) &&
            el.DepartmentName.toString().toLowerCase().includes(
                departmentNameFilter.toString().trim().toLowerCase()
            )

        }
    )
    setDepartment(filteredData)

}


let changeDepartmentIdFilter = (e) => {
    setValues({...values, 'departmentIdFilter': e.target.value})
    filterFn()
}


let changeDepartmentNameFilter = (e) => {
    console.log(e.target.value)
    setValues({...values, 'departmentNameFilter': e.target.value})
    filterFn()
}


 return (
        <div>

            <button type="button" className="btn btn-primary m-2 float-end" data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={() => addClick()}>Add Department</button>

            <table className="table table-striped">
                <thead>
                    <tr>
                        <th>
                            <input className="form-control m-2" onChange={(e) => {changeDepartmentIdFilter(e)}} placeholder='Filter' />
                            DepartmentId
                        </th>
                        <th>
                            <input className="form-control m-2" onChange={(e) => {changeDepartmentNameFilter(e)}} placeholder='Filter' />
                            DepartmentName
                        </th>
                        <th>
                            Options
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {department.map((dep) => 

                        <tr key={dep.DepartmentId}>
                            <td>{dep.DepartmentId}</td>
                            <td>{dep.DepartmentName}</td>
                            <td>
                                
                                {/* >>>>>>EDIT BUTTON<<<<<< */}
                                <button type="button" className="btn btn-light mr-1" data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={() => editClick(dep)}>
                                </button>

                                {/* >>>>>>>DELETE BUTTON<<<<<<<<<<< */}
                                <button type="button" className="btn btn-light mr-1" onClick={() => deleteClick(dep.DepartmentId)}>
                                </button>

                            </td>
                        </tr>
                        )}
                </tbody>
            </table>

            <div className="modal fade" id="exampleModal" tabIndex="-1" aria-hidden="true">
                <div className="modal-dialog modal-lg modal-dialog-centered">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title">{values.modalTitle}</h5>

                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>

                        </div>

                        <div className="modal-body">
                            <div className="input-group mb-3">
                                <span className="input-group-text">Department Name</span>
                                <input name = 'departmentName' type="text" className="form-control" value={values.departmentName} onChange={(e) => {changeDepartmentName(e)}} />
                            </div>

                            {values.departmentId == 0 ?
                                <button type="button" className="btn btn-primary float-start" onClick={() => createClick()}>Create</button> :
                                null
                            }

                            {values.departmentId != 0 ?
                                <button type="button" className="btn btn-primary float-start" onClick={() => updateClick()}>Edit</button> :
                                null
                            }

                        </div>

                    </div>
                </div>
            </div>

        </div>
    )
}

export default Department

【问题讨论】：

如果您创建了一个可运行的代码 sn-p 来重现您所看到的问题，这将有所帮助。
@SerhiiHolinei 很抱歉，但我不知道该怎么做，但如果有帮助，这里是代码的 github 链接github.com/naveednaseer/delete_later/blob/master/frontend/src/… 谢谢
@SerhiiHolinei 我添加了另一个仅包含相关代码的部分

标签： javascript reactjs react-hooks

【解决方案1】：

我认为您遇到的问题与您在更改状态后立即调用 filterFn 的事实有关：

let changeDepartmentNameFilter = (e) => {
    console.log(e.target.value)
    setValues({...values, 'departmentNameFilter': e.target.value})
    filterFn()
}

departmentNameFilter 不会同步更新。这意味着filterFn() 将被调用之前的状态。

有不同的方法来解决您的问题。例如，您可以将要过滤的值传递给 filterFn(newState) 并将其用作参数：



let filterFn = (newValues) =>{
    let departmentIdFilter = newValues.departmentIdFilter
    let departmentNameFilter = newValues.departmentNameFilter


    let filteredData = filteredDepartment.filter(
        function(el){
            return el.DepartmentId.toString().toLowerCase().includes(
                departmentIdFilter.toString().trim().toLowerCase()
            ) &&
            el.DepartmentName.toString().toLowerCase().includes(
                departmentNameFilter.toString().trim().toLowerCase()
            )

        }
    )
    setDepartment(filteredData)
}

let changeDepartmentNameFilter = (e) => {
    console.log(e.target.value)
    const newValues = {...values, 'departmentNameFilter': e.target.value};
    setValues(newValues)
    filterFn(newValues)
}

或者您可以使用useMemo 挂钩在每次值更改时过滤数组：

const filteredDepartment = useMemo(() =>{
    let departmentIdFilter = values.departmentIdFilter
    let departmentNameFilter = values.departmentNameFilter

    // Note, I renamed filteredDepartment to department
    return department.filter(
        function(el){
            return el.DepartmentId.toString().toLowerCase().includes(
                departmentIdFilter.toString().trim().toLowerCase()
            ) &&
            el.DepartmentName.toString().toLowerCase().includes(
                departmentNameFilter.toString().trim().toLowerCase()
            )

        }
    )

}, [values, department]

【讨论】：

哇，我已经尝试修复它好几个小时了，终于修复了，非常感谢你真的帮助了很多人，你真棒，谢谢
@naveed 不客气，伙计 :)