Question

我有一个函数，其中包含一些承诺链，但这并不重要。

当我运行某个突变的refetch时，它会给我Uncaught (in promise) TypeError: Cannot read property 'refetch' of undefined。

奇怪的是，如果我删除了一个突变，它将起作用。所以这是代码：

Promise.all(this.props.questionnaireData.map(({ kind, id }): Promise<any> => {
    const responses = this.props.formData[kind];
    return this.props.updateQuestionnaire(id, responses);
})).then(() => {
    this.props.finishAssessment(this.props.assessmentId)
        .then(() => {
            track('Assessment -- Finished', {
                'Assessment Kind' : this.props.assessmentKind,
                'Assessment Id'   : this.props.assessmentId,
            });
            if (this.props.assessmentKind === 'INITIAL_ASSESSMENT') {
                this.props.getCompletedInitialAssessment.refetch().then(() => {
                    Router.replace(routes.LoadingAssessmentResults.to, routes.LoadingAssessmentResults.as);
                });

                this.submitEmailNotifications();
            } else if(this.props.assessmentKind === 'GOAL_CHECK_IN') {
                Router.replace(routes.MemberProgressDashboard.to, routes.MemberProgressDashboard.as);
            } else {
                Router.replace(routes.MemberDashboard.to, routes.MemberDashboard.as);
            }
        });
});

错误发生在this.props.getCompletedInitialAssessment.refetch()，我不知道为什么。但是，当我删除this.props.finishAssessment(this.props.assessmentId)时，只有重新引用才能起作用。

基本上：

Promise.all(this.props.questionnaireData.map(({ kind, id }): Promise<any> => {
    const responses = this.props.formData[kind];
    return this.props.updateQuestionnaire(id, responses);
})).then(() => {
        track('Assessment -- Finished', {
            'Assessment Kind' : this.props.assessmentKind,
            'Assessment Id'   : this.props.assessmentId,
        });
        if (this.props.assessmentKind === 'INITIAL_ASSESSMENT') {
            this.props.getCompletedInitialAssessment.refetch().then(() => {
            Router.replace(routes.LoadingAssessmentResults.to, routes.LoadingAssessmentResults.as);
            });

            this.submitEmailNotifications();
        } else if(this.props.assessmentKind === 'GOAL_CHECK_IN') {
            Router.replace(routes.MemberProgressDashboard.to, routes.MemberProgressDashboard.as);
        } else {
            Router.replace(routes.MemberDashboard.to, routes.MemberDashboard.as);
        }
});

将使重新提取工作。否则，它将抱怨它不知道什么是重新获取。

对于Apollo，我正在使用graphql HOC，它看起来像这样：

graphql(getCompletedInitialAssessment, {
    name    : 'getCompletedInitialAssessment',
    options : { variables: { status: ['Finished'], limit: 1 } },
}),
graphql(updateQuestionnaire, {
    props: ({ mutate }) => ({
        updateQuestionnaire: (id, responses) => {
            let normalized = {};

                for (let res in responses) {
                    let num = +responses[res];
                    // If the value is a stringified numuber, turn it into a num
                    // otherwise, keep it a string.
                    normalized[res] = Number.isNaN(num) ? responses[res] : num;
                }

                const input = {
                    id,
                    patch: { responses: JSON.stringify(normalized) },
                };

                return mutate({
                    variables: { input },
                });
            },
        }),
    }),
graphql(finishAssessment, {
    props: ({ mutate }) => ({
        finishAssessment: (id) => {
            const input = { id };

            return mutate({
                variables      : { input },
                refetchQueries : ['getMemberInfo'],
            });
        },
    }),
}),

我尝试过的方法甚至是重写它以使用异步/等待，但是问题仍然存在：

try {
    await Promise.all(this.props.questionnaireData.map(({ kind, id }): Promise<any> => {
        const responses = this.props.formData[kind];
        return this.props.updateQuestionnaire(id, responses);
    }));
    const finishAssessmentRes = await this.props.finishAssessment(this.props.assessmentId);
    console.log(finishAssessmentRes)

    if (this.props.assessmentKind === 'INITIAL_ASSESSMENT') {
        const res = await this.props.getCompletedInitialAssessment.refetch();
        console.log(res);
        this.submitEmailNotifications();
        Router.replace(routes.LoadingAssessmentResults.to, routes.LoadingAssessmentResults.as);
    } else if(this.props.assessmentKind === 'GOAL_CHECK_IN') {
        Router.replace(routes.MemberProgressDashboard.to, routes.MemberProgressDashboard.as);
    } else {
        Router.replace(routes.MemberDashboard.to, routes.MemberDashboard.as);
    }
} catch (error) {
    console.error(error);
}

老实说，我不知道发生了什么或为什么重新引用不起作用。重构成钩子会有帮助吗？有人知道吗？

Answer 1

来自the docs

config.props属性允许您定义一个映射函数，该函数接受由def test_relative_path(): assert relative_path('../test') == './test' assert relative_path('../../test') == './test' assert relative_path('../../abc/../test') == './test' assert relative_path('../../abc/../test/fixtures') == './test/fixtures' assert relative_path('../../abc/../.test/fixtures') == './.test/fixtures' assert relative_path('/test/foo') == './test/foo' assert relative_path('./test/bar') == './test/bar' assert relative_path('.test/baz') == './.test/baz' assert relative_path('qux') == './qux'函数添加的props（对于查询，graphql()，对于突变，props.data）添加的props ...您将计算一个新的props ...对象，该对象将提供给props.mutate包装的组件。

要访问graphql()功能未添加的道具，请使用graphql()关键字。

通过使用ownProps函数，您告诉HOC哪些道具向下传递到下一个HOC或组件本身。如果您在props返回的内容中不包含已经传递给它的props，它将不会传递给组件。您需要对每个props函数执行以下操作：

props

编写HOC非常麻烦，无论如何props: ({ mutate, ownProps }) => ({ finishAssessment: (id) => { // }, ...ownProps, }), HOC都被钩子取代了。我强烈建议迁移到hooks API。

React Apollo：未捕获（承诺）TypeError：无法读取未定义的属性“ refetch”

1 个答案: