Question

我正在创建一个登录组件，它将显示登录错误。但我不知道如何将errors数组从_onSubmit函数转移到LoginForm

这里我的代码是代码。

import React, { Component } from 'react';
import Split from 'grommet/components/Split';
import Section from 'grommet/components/Section';
import Sidebar from 'grommet/components/Sidebar';
import LoginForm from 'grommet/components/LoginForm';
//import Logo from './Logo';
import firebase from 'firebase';
export default class Login extends Component {

  constructor() {
    super();
    this._onSubmit = this._onSubmit.bind(this);
    this._onResponsive = this._onResponsive.bind(this);
    this.state = {responsive: 'multiple',errors:[]};
  }

  _onSubmit(fields) {


    firebase.auth().signInWithEmailAndPassword(fields.username, fields.password).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      var errors = [];

      errors.push(errorCode);
      errors.push(errorMessage);
      console.log(errors);


      // How to bring the errors from here to ??????
    });
  }

  _onResponsive(responsive) {
    this.setState({responsive: responsive});
  }

  render() {

    var image;
    if ('multiple' === this.state.responsive) {
      image = <Section full={true} pad="none" texture="url(img/grafitti.jpg)" />;
    }


    return (
      <Split flex="left" separator={true} onResponsive={this._onResponsive}>
        {image}
        <Sidebar justify="center" align="center" pad="medium" size="large">
          <LoginForm

            title="Ferret"
            onSubmit={this._onSubmit}
            errors={??????} />
        </Sidebar>
      </Split>
    );
  }
}

有人可以提供指导吗？感谢!!!

Answer 1

这里的问题是，当你在.catch（）处理程序中引入函数时，你正在创建闭包。

您正确地将this绑定到_onSubmit函数，但是从使用function() {}创建的闭包中，您的this未绑定到外部作用域

您可以选择使用arrow function，但不会创建词汇：

firebase
  .auth()
  .signInWithEmailAndPassword(fields.username, fields.password)
  .catch((error) => {
    ...
    // Now works since the arrow function does not create a new lexical this
    this.setState({})
  });

或者，你可以bind你的外this（你期望有一个setState()函数的那个）到内部闭包：

firebase
  .auth()
  .signInWithEmailAndPassword(fields.username, fields.password)
  .catch(function(error) {
    this.setState({}) // Is now bound to the outer this
  }.bind(this));

Answer 2

将state.errors作为道具传递给子组件。

---------------------------------------------------------------------------------------------------------
--- Nom : reset_sequence
--- Description : Générique - met à jour les séquences au max de l'identifiant
---------------------------------------------------------------------------------------------------------

CREATE OR REPLACE FUNCTION reset_sequence() RETURNS void AS 
$BODY$
DECLARE _sql VARCHAR := '';
DECLARE result threecol%rowtype; 
BEGIN
FOR result IN 
WITH fq_objects AS (SELECT c.oid,n.nspname || '.' ||c.relname AS fqname ,c.relkind, c.relname AS relation FROM pg_class c JOIN pg_namespace n ON n.oid = c.relnamespace ),
    sequences AS (SELECT oid,fqname FROM fq_objects WHERE relkind = 'S'),
    tables    AS (SELECT oid, fqname FROM fq_objects WHERE relkind = 'r' )
SELECT
       s.fqname AS sequence,
       t.fqname AS table,
       a.attname AS column
FROM
     pg_depend d JOIN sequences s ON s.oid = d.objid
                 JOIN tables t ON t.oid = d.refobjid
                 JOIN pg_attribute a ON a.attrelid = d.refobjid and a.attnum = d.refobjsubid
WHERE
     d.deptype = 'a' 
LOOP
     EXECUTE 'SELECT setval('''||result.col1||''', COALESCE((SELECT MAX('||result.col3||')+1 FROM '||result.col2||'), 1), false);';
END LOOP;
END;$BODY$ LANGUAGE plpgsql;

SELECT * FROM reset_sequence();

确保在LoginForm中，当传递的值为空数组时，您不会显示错误。

创建一个将显示登录错误的登录组件

2 个答案: