Question

在我的 redux 商店中，我有 4 个对象数组，在下面的代码中，您将看到我检查是否设置了某个 prop，如果设置了，则发送这 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])

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

0 个答案: