Javascript 组件刷新时反应状态未清除

在我的redux存储中，我有4个对象数组，在下面的代码中，您将看到我检查是否设置了某个道具，如果设置了，我将分派这4个数组。然后，我使用不同的useEffects将它们转换并合并到状态中（以填充数据表）。所有这些都可以很好地工作，但是如果我离开页面并返回到它，操作将再次运行，我拥有2个全部。我的状态的初始值是

[]

。我已经尝试调度一个重置减缩器来将它们全部设置回空数组，但之前的状态仍然保持不变

useEffect(() => {
        if(props.contractor._id) {
            dispatch({ type: INCOMING_CALLS_LIST_RESET })
            dispatch({ type: OUTGOING_CALLS_LIST_RESET })
            dispatch({ type: MEETING_LIST_RESET })
            dispatch({ type: EMAIL_LIST_RESET })
            dispatch(listIncomingCalls())
            dispatch(listOutgoingCalls())
            dispatch(listMeetings())
            dispatch(listEmails())
        }
    }, [props.contractor._id, dispatch])

    useEffect(() => {
        if(incCalls) {
            const transformedIncomingCalls = incCalls.filter(call => call.contractor._id === props.contractor._id).map(c => ({
                type: 'Incoming Call',
                contact_person: c.contact_person,
                logged_by: c.created_by.name,
                date: <Moment format="DD/MM/YYYY @ HH:SS">
                        {c.time_created}
                        </Moment>,
                link: <> <LinkContainer to={`/incoming-calls/${c._id}`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
            }))
            setData(prevData => [...prevData, ...transformedIncomingCalls])
        }
    }, [incCalls, props.contractor._id])

    useEffect(() => {
        if(outCalls) {
            const transformedOutgoingCalls = outCalls.filter(call => call.contractor._id === props.contractor._id).map(c => ({
                type: 'Outgoing Call',
                contact_person: c.contact_person,
                logged_by: c.created_by.name,
                date: <Moment format="DD/MM/YYYY @ HH:SS">
                {c.time_created}
            </Moment>,
                link: <> <LinkContainer to={`/outgoing-calls/${c._id}`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
            }))
            setData(prevData => [...prevData, ...transformedOutgoingCalls])
        }
    }, [outCalls, props.contractor._id])

    useEffect(() => {
        if(meetings_list) {
            const transformedMeetings = meetings_list.filter(meeting => meeting.contractor._id === props.contractor._id).map(m => ({
                type: 'Meeting',
                contact_person: m.held_with,
                logged_by: m.logged_by.name,
                date: <Moment format="DD/MM/YYYY @ HH:SS">
                {m.meeting_time}
            </Moment>,
                link: <> <LinkContainer to={`/meeting/${m._id}`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
            }))
            setData(prevData => [...prevData, ...transformedMeetings])
        }
    }, [meetings_list, props.contractor._id])

    useEffect(() => {
        if(email_list) {
            const transformedEmails = email_list.filter(email => email.contractor._id === props.contractor._id).map(e => ({
                type: 'Email',
                contact_person: e.contact_person,
                logged_by: e.logged_by.name,
                date: <Moment format="DD/MM/YYYY @ HH:SS">
                {e.date}
            </Moment>,
                link: <> <LinkContainer to={`/emails/${e.contractor._id}/`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
            }))
            setData(prevData => [...prevData, ...transformedEmails])
        }
    }, [email_list, props.contractor._id])

useffect（（）=>{
如果（道具承包商）{
调度（{类型：传入呼叫\列表\重置}）
调度（{type:OUTGOING_CALLS_LIST_RESET}）
调度（{type:MEETING_LIST_RESET}）
分派（{type:EMAIL\u LIST\u RESET}）
分派（listIncomingCalls（））
分派（listOutgoingCalls（））
调度（listMeetings（））
分派（listEmails（））
}
}，[props.contractor.\u id，调度]）
useffect（（）=>{
如果（电话）{
const transformedIncomingCalls=incCalls.filter（call=>call.contractor.\u id==props.contractor.\u id）.map（c=>({
键入：“传入呼叫”，
联系人：c.联系人，
记录人：c.创建人姓名，
日期：
{c.time_created}
,
链接：
}))
setData（prevData=>[…prevData，…TransformedComingCalls]）
}
}，[incCalls，props.contractor.\u id]）
useffect（（）=>{
如果（呼出）{
const transformedOutgoingCalls=outCalls.filter（call=>call.contractor.\u id==props.contractor.\u id）.map（c=>({
键入：“传出呼叫”，
联系人：c.联系人，
记录人：c.创建人姓名，
日期：
{c.time_created}
,
链接：
}))
setData（prevData=>[…prevData，…transformedOutgoingCalls]）
}
}，[outCalls，props.contractor.\u id]）
useffect（（）=>{
if（会议列表）{
const transformedMeetings=meetings\u list.filter（meeting=>meeting.contractor.\u id===props.contractor.\u id）.map（m=>({
键入：“会议”，
联系人：m.Hold，
logged_by:m.logged_by.name，
日期：
{m.会议时间}
,
链接：
}))
setData（prevData=>[…prevData，…transformedMeetings]）
}
}，[meetings\u list，props.contractor.\u id]）
useffect（（）=>{
如果（电子邮件列表）{
const transformedEmails=email\u list.filter（email=>email.contractor.\u id==props.contractor.\u id）.map（e=>({
键入：“电子邮件”，
联系人：即联系人，
logged_by:e.logged_by.name，
日期：
{e.date}
,
链接：
}))
setData（prevData=>[…prevData，…transformedEmails]）
}
}，[电子邮件列表，道具承包商编号]）

您是否尝试过在卸载时分派这些重置（useEffect返回函数）？能否提供一个代码片段，以便我完全理解？我有5个用处，假设MeTestsIn列表等是整个新的会议等，您可能需要考虑将数据作为对象，以便添加具有现有ID的数据将重写而不是附加重复。对象结构可以是{[contract_id]：{[type]：{…}，…}}}这是一个清理函数示例，用于在卸载时清理状态：

const[isOnline，setIsOnline]=useState（false）；useffect（（）=>{setIsOnline（true）return（）=>setIsOnline（false）//这是在卸载时运行的}

更多信息：它应该足以在一个useffect中进行清理