Question

您好，我video

但是最后，当他将功能更改为类时，对我没有任何帮助我已经在Google中检查了道具类型，因为它没有给我很好的结果

当我运行此代码并以某种方式运行时，当我更改为登录页面时出现以下错误

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不会返回您期望的字符串，该字符串将始终返回上面示例中指定的布尔值。

反应js渲染问题

1 个答案: