使用react和Slack的slack invite

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 invite如何在这样的表单中用作opt-in：

if (isSlackInvite) {
  inviteToSlack(email);
}

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