Connect возвращает объект, но как мне получить его, чтобы он возвращал функцию? - PullRequest
Новая
       6

Connect возвращает объект, но как мне получить его, чтобы он возвращал функцию?

1 голос
/ 26 сентября 2019

У меня есть два файла, один импортирует и вызывает метод, другой файл экспортирует метод.Когда я это делаю, я получаю следующую ошибку: «Объект (...) не является функцией»

Вот экспортированный код с именем VerifyEmailResend: 

import { api } from '../../api'
import { connect } from 'react-redux'

const mapDispatchToProps = dispatch => ({
    onSetVerifyEmailResent: verifyEmailResent =>
        dispatch({ type: 'VERIFY_EMAIL_RESENT_SET', verifyEmailResent }),
    onSetVerifyEmailVerified: verifyEmailVerified =>
        dispatch({ type: 'VERIFY_EMAIL_RESENT_VERIFIED', verifyEmailVerified })
})

const VerifyEmailResend = ({ dispatch }) => () => {
    debugger
    api.user.resendEmailVerification().then(data => {
        if (data.resent) {
            // onSetVerifyEmailResent(true)
        }
        if (data.verified) {
            // onSetVerifyEmailVerified(false)
        }
    })
}

export default connect(
    null,
    mapDispatchToProps
)(VerifyEmailResend)

Тогда вотимпорт файла и вызов метода VerifyEmailResend (): 

import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import { object, number } from 'prop-types'
import { Container } from '../container/Styles'
import { Block, Flex } from '../layout/Styles'
import { H2, H3, H4, P } from '../text/Styles'
import Button from '../button/Button'
import { Step } from './Styles'
import { STEPS } from './Steps'
import VerifyEmailResend from '../verifyemail/VerifyEmailResend'

import * as Routes from '../../constants/Routes'
import { Link } from 'react-router-dom'

class AboutSteps extends Component {
    static propTypes = {
        /** user object from logging in */
        user: object,
        /** screen width from redux */
        screenWidth: number
    }

    render() {
        const { user, screenWidth } = this.props
        // user.email_verified_at

        const mobile = screenWidth < 768

        return (
            <Block padding="60px 0" background="DarkestGray">
                <Container>
                    <H2 align="center" margin="0 0 20px 0">
                        FIND FILL NEAR YOU. FOR FREE.
                    </H2>
                    <H4
                        color="LightGray"
                        hover="LightGray"
                        align="center"
                        margin="0 0 60px 0"
                    >
                        Three easy steps. No brokerage fees. Ever.
                    </H4>
                    {mobile ? (
                        <Fragment>
                            {STEPS.map((data, key) => (
                                <Block
                                    key={key}
                                    width="calc(100% - 40px)"
                                    margin="40px 20px 20px 20px"
                                    background="DarkGray"
                                    padding="70px 0 20px 0"
                                >
                                    <Step background={data.color}>
                                        {key + 1}
                                    </Step>
                                    <H3 padding="20px">
                                        {user && user.email_verified_at
                                            ? data.verifiedtitle
                                            : data.title}
                                    </H3>
                                    <P
                                        color="LightGray"
                                        hover="LightGray"
                                        margin="0 20px"
                                    >
                                        {user && user.email_verified_at
                                            ? data.verifiedtext
                                            : data.text}
                                    </P>
                                </Block>
                            ))}
                        </Fragment>
                    ) : (
                        <Flex align="flex-start">
                            {STEPS.map((data, key) => (
                                <Block
                                    key={key}
                                    width="320px"
                                    margin="20px"
                                    background="DarkGray"
                                    padding="70px 0 20px 0"
                                >
                                    <Step background={data.color}>
                                        {key + 1}
                                    </Step>
                                    <H3 padding="20px">
                                        {user && user.email_verified_at
                                            ? data.verifiedtitle
                                            : data.title}
                                    </H3>
                                    <P
                                        color="LightGray"
                                        hover="LightGray"
                                        margin="0 20px"
                                    >
                                        {user && user.email_verified_at
                                            ? data.verifiedtext
                                            : data.text}
                                    </P>
                                </Block>
                            ))}
                        </Flex>
                    )}
                    {!user && (
                        <Block text="center" margin="40px 0 0 0">
                            <Button width="200px">
                                <Link to={Routes.REGISTER}>
                                    SIGN UP FOR FREE
                                </Link>
                            </Button>
                        </Block>
                    )}
                    {user && !user.email_verified_at && (
                        <Block text="center" margin="40px 0 0 0">
                            <Button action={VerifyEmailResend()} width="200px">
                                VERIFY EMAIL NOW
                            </Button>
                        </Block>
                    )}
                </Container>
            </Block>
        )
    }
}

const mapStateToProps = state => ({
    user: state.sessionState.user,
    screenWidth: state.eventListenerState.screenWidth
})

export default connect(mapStateToProps)(AboutSteps)

Что мне здесь не хватает?

Я знаю, что connect возвращает объект, поэтому как мне получить его вместо того, чтобы вернуть функцию "VerifyEmailResend "?

1 Ответ

2 голосов
/ 26 сентября 2019

connect - это HOC, который ожидает, что компонент вводит реквизиты в качестве второго аргумента, но VerifyEmailResend не является компонентом React.Вы должны использовать connect в AboutSteps и передавать действия в качестве аргументов VerifyEmailResend. 

//AboutSteps.js
export default connect(
    null,
    mapDispatchToProps
)(AboutSteps)

И внутри AboutSteps рендер 

   <Button action={VerifyEmailResend(onSetVerifyEmailResent, onSetVerifyEmailVerified)} width="200px">
       VERIFY EMAIL NOW
   </Button>

И изменять VerifyEmailResendдо 

const VerifyEmailResend = (onSetVerifyEmailResent, onSetVerifyEmailVerified) => () => {
    debugger
    api.user.resendEmailVerification().then(data => {
        if (data.resent) {
            // onSetVerifyEmailResent(true)
        }
        if (data.verified) {
            // onSetVerifyEmailVerified(false)
        }
    })
}
...