Question

我正在尝试根据本教程设置一个松弛的邀请：https://www.robinwieruch.de/slack-invite-javascript-react

我将所有内容设置为与示例相同但我收到此错误

TypeError: onUserAuthSignUp is not a function

我可以在代码中看到它正在被解构：

   const { onUserAuthSignUp } = this.props

但是我看不出我错过了什么，我还在学习JS和React，所以我觉得这很明显。

表单的完整代码如下，<Form />然后导入index.js文件。

// Form.js

        import React, { Component } from "react"
        import axios from 'axios';

        var SLACK_TOKEN = 'slack-token';
        var SLACK_INVITE_ENDPOINT = 'https://slack.com/api/users.admin.invite';

        function inviteSuccess() {
        console.log('success');
        }

        function inviteError() {
        console.log('error');
        }

        function inviteToSlack(email) {
        var QUERY_PARAMS = `email=${email}&token=${SLACK_TOKEN}&set_active=true`;

        axios.get(`${SLACK_INVITE_ENDPOINT}?${QUERY_PARAMS}`)
            .then(inviteSuccess)
            .catch(inviteError);
        }

        export class Form extends Component {
            constructor(props) {
            super(props);

            this.state = {
                email: '',
                passwordOne: '',
                passwordTwo: '',
                username: '',
                isSlackInvite: true,
            };

            this.onSubmit = this.onSubmit.bind(this);
            this.onCheckSlackInvite = this.onCheckSlackInvite.bind(this);
            }

            onCheckSlackInvite(e) {
            this.setState(prevState => ({ isSlackInvite: !prevState.isSlackInvite }));
            }

            onSubmit(e) {
            e.preventDefault();

            const {
                email,
                passwordOne,
                username,
                isSlackInvite,
            } = this.state;

            const { onUserAuthSignUp } = this.props;

            if (isSlackInvite) {
                inviteToSlack(email);
            }

            onUserAuthSignUp(email, passwordOne, username);
            }

            render() {
            const {
                email,
                passwordOne,
                passwordTwo,
                username,
                isSlackInvite,
            } = this.state;

            return (

                    <form onSubmit={this.onSubmit}>
                        <input
                            type="text"
                            placeholder="Full Name"
                            value={username}
                            onChange={e => this.setState({ username: e.target.value})}
                        />
                        <input
                            type="text"
                            placeholder="Email Address"
                            value={email}
                            onChange={e => this.setState({ email: e.target.value})}
                        />
                        <input
                            type="password"
                            placeholder="Password"
                            value={passwordOne}
                            onChange={e => this.setState({ passwordOne: e.target.value})}
                        />
                        <input
                            type="password"
                            placeholder="Confirm Password"
                            value={passwordTwo}
                            onChange={e => this.setState({ passwordTwo: e.target.value})}
                        />

                        <div>
                            <label>Join Slack Group</label>
                            <input
                                type="checkbox"
                                checked={isSlackInvite}
                                onChange={this.onCheckSlackInvite}
                            />
                        </div>

                        <button
                            disabled={passwordOne !== passwordTwo || passwordOne === '' || username === ''}
                            type="submit"
                            className="btn"
                        >
                            Sign Up
                        </button>

                    </form>
            )
            }
        }

Answer 1

这里的教程作者。很抱歉在教程中不清楚！

SignUp组件仅展示如何在之后使用它（例如在注册过程中）。但它没有说明如何实现整个注册，它只是展示了如何将Slack邀请用作这种形式的选择：

if (isSlackInvite) {
  inviteToSlack(email);
}

如果您想要实施整个注册过程，请查看Complete Firebase in React authentication tutorial。在那里，您将实现SignUp表单，然后您可以选择加入Slack邀请。

Slack邀请反应和松弛api

1 个答案: