反應js渲染問題

Question

嗨，我在關注這部影片

但是最后，當他將函數更改為class時，對我沒有任何幫助。我已經在Google中檢查了prop類型，因為它不能給我帶來很好的結果

當我運行此代碼並以某種方式運行時，當我更改時出現以下錯誤轉到登錄頁面

LoginPage（...）：渲染未返回任何內容。 這通常意味着缺少return語句。 或者，不渲染任何內容，則返回null。

這是代碼

Loginform.js

import React from 'react';
import { Form, Button } from 'semantic-ui-react';
import Validator from 'validator';
import propTypes from 'prop-types';
import InLineError from '../messages/InLineError';

class LoginForm extends React.Component {
    state = {
        data: {
            email: '',
            password: ''
        },
        loading: false,
        errors: {}
    }

        onChange = e => 
        this.setState({
            data: { ...this.state.data, [e.target.name]: e.target.value } 
            });

        onSubmit = () => 
        {
            const errors =this.validate(this.state.data);
            this.setState({errors});
            if(Object.keys(errors).length === 0)
            {
                this.Props.submit(this.state.data);
            }
        };
        validate = (data) => 
        {
            const errors = {};

            if(!data.password) errors.password='password can\'t be blank'
            if(!Validator.email) errors.email= 'email invalid'

            return errors;
        }

        render() {
            const { data,errors } = this.state;

            return (
                <Form  onSubmit={this.onSubmit}  >
                    <Form.Field error={!!errors.email} >
                        <label htmlFor='email'>Email</label>
                        <input 
                        type='email' 
                        id='email' 
                        name='email' 
                        placeholder='example@xyz.com' 
                        value={data.email}
                        onChange={this.onChange} />
                        {errors.email && <InLineError text={errors.email}/>}
                    </Form.Field>
                    <Form.Field error={!!errors.password} >
                        <label htmlFor='password'>Password</label>
                        <input 
                        type='password' 
                        id='password' 
                        name='password' 
                        placeholder='secure' 
                        value={data.password}
                        onChange={this.onChange} />
                        {errors.password && <InLineError text={errors.password}/>}
                    </Form.Field>
                    <Button primary>login</Button>
                </Form>
            );
        }
    }

    LoginForm.propTypes={
    submit: propTypes.func.isRequired
    };

export default LoginForm;

這是inlineError.js

import React from 'react';
import propTypes from 'prop-types';


const InLineError = ({ Text }) =>  <span style= {{color:'#ae5856'}}>{ Text }</span>;

InLineError.propTypes={
    Text:propTypes.string.isRequired
};

export default InLineError;

Loginpage.js

import React from 'react';
import Loginform from '../forms/LoginForm'

class LoginPage extends React.Component {
submit = (data) => {
    console.log(data);
};

    render()
    {
        return
        (
                <div>
                <h1>LoginPage</h1>
                <Loginform submit = {this.submit}/>
                </div>
        );
    }
}

export default LoginPage;

皮棉后

 sudo yarn  lint
yarn lint v0.15.1$ eslint src

/home/admin-ad/react js/bookworm/bookworm-react/src/component/forms/LoginForm.js
  75:13  error  'submit' PropType is defined but prop is never used  react/no-unused-prop-types

/home/admin-ad/react js/bookworm/bookworm-react/src/component/pages/LoginPage.js
   6:5  warning  Unexpected console statement                                           no-console
  12:9  error    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  12:9  error    Unreachable code                                                       no-unreachable

✖ 4 problems (3 errors, 1 warning)

(node:10799) [ESLINT_LEGACY_OBJECT_REST_SPREAD] DeprecationWarning: The 'parserOptions.ecmaFeatures.experimentalObjectRestSpread' option is deprecated. Use 'parserOptions.ecmaVersion' instead. (found in "node_modules/eslint-config-airbnb-base/index.js")
error Command failed with exit code 1.
info Visit http://yarnpkg.com/en/docs/cli/lint for documentation about this command.

Answer 1

引起我注意的第一件事是!!errors.email為什么您甚至需要這個errors.email也會這樣做。 這是因為發生了什么事，

 let k = "someString"; console.log("k is", k); console.log("!!k is", !!k); 

!!k不會返回您期望的字符串，該字符串將始終返回上面示例中指定的布爾值。