代码之家  ›  专栏  ›  技术社区  ›  Mohsin

未捕获错误:“style”属性需要来自样式属性的映射

  •  -1
  • Mohsin  · 技术社区  · 7 年前

    根据我粘贴的错误,请看一看

    import React, { Component } from 'react';
    import { getFromStorage
      ,setInStorage } from "../../utils/storage";
    import 'whatwg-fetch';
    // import TodoList from "./TodoList"
    
    class Home extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          token:'',
          isLoading: true,
          signUpError: '',
          signInError: '',
          signInEmail: '',
          signInPassword: '',
          signUpFirstName: '',
          signUpLastName: '',
          signUpEmail: '',
          signUpPassword: ''
    
        };
    
        this.onTextboxChangeSignInEmail = this.onTextboxChangeSignInEmail.bind(this);
        this.onTextboxChangeSignInPassword = this.onTextboxChangeSignInPassword.bind(this);
        this.onTextboxChangeSignUpEmail = this.onTextboxChangeSignUpEmail.bind(this);
        this.onTextboxChangeSignUpPassword = this.onTextboxChangeSignUpPassword.bind(this);
        this.onTextboxChangeSignUpFirstName = this.onTextboxChangeSignUpFirstName.bind(this);
        this.onTextboxChangeSignUpLastName = this.onTextboxChangeSignUpLastName.bind(this);
    
        this.onSignIn = this.onSignIn.bind(this);
        this.onSignUp = this.onSignUp.bind(this);
        this.logout = this.logout.bind(this);
      }
    
    
      componentDidMount() {
        const obj = getFromStorage('the_main_app');
        if (obj && obj.token) {
          const { token } = obj;
          // Verify token
          fetch('/api/account/verify?token=' + token)
            .then(res => res.json())
            .then(json => {
              if (json.success) {
                this.setState({
                  token,
                  isLoading: false
                });
              } else {
                this.setState({
                  isLoading: false,
                });
              }
            });
        } else {
          this.setState({
            isLoading: false,
          });
        }
      }
    
    
      onTextboxChangeSignInEmail(event) {
        this.setState({
          signInEmail: event.target.value,
        })
      }
    
      onTextboxChangeSignInPassword(event) {
        this.setState({
          signInPassword: event.target.value,
        })
      }
    
      onTextboxChangeSignUpEmail(event) {
        this.setState({
          signUpEmail: event.target.value,
        })
      }
    
      onTextboxChangeSignUpPassword(event) {
        this.setState({
          signUpPassword: event.target.value,
        })
      }
    
      onTextboxChangeSignUpFirstName(event) {
        this.setState({
          signUpFirstName: event.target.value,
        })
      }
    
      onTextboxChangeSignUpLastName(event) {
        this.setState({
          signUpLastName: event.target.value,
        });
      }
    
      onSignIn() {
        // Grab state
        const {
          signInEmail,
          signInPassword,
        } = this.state;
        this.setState({
          isLoading: true,
        });
        // Post request to backend
        fetch('/api/account/signin', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            email: signInEmail,
            password: signInPassword,
          }),
        }).then(res => res.json())
          .then(json => {
            console.log('json', json);
            if (json.success) {
              setInStorage('the_main_app', { token: json.token });
              this.setState({
                signInError: json.message,
                isLoading: false,
                signInPassword: '',
                signInEmail: '',
                token: json.token,
              });
            } else {
              this.setState({
                signInError: json.message,
                isLoading: false,
              });
            }
          });
      }
    
      onSignUp() {
        // Grab state
        const {
          signUpFirstName,
          signUpLastName,
          signUpEmail,
          signUpPassword,
        } = this.state;
    
        this.setState({
          isLoading: true,
        });
        // Post request to backend
        fetch('/api/account/signup', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            firstName: signUpLastName,
            lastName: signUpLastName,
            email: signUpEmail,
            password: signUpPassword,
          }),
        }).then(res => res.json())
          .then(json => {
            console.log('json', json);
            if (json.success) {
              this.setState({
                signUpError: json.message,
                isLoading: false,
                signUpEmail: '',
                signUpPassword: '',
              });
            } else {
              this.setState({
                signUpError: json.message,
                isLoading: false,
              });
            }
          });
      }
    
      logout() {
        this.setState({
          isLoading: true,
        });
        const obj = getFromStorage('the_main_app');
        if (obj && obj.token) {
          const { token } = obj;
          // Verify token
          fetch('/api/account/logout?token=' + token)
            .then(res => res.json())
            .then(json => {
              if (json.success) {
                this.setState({
                  token: '',
                  isLoading: false
                });
              } else {
                this.setState({
                  isLoading: false,
                });
              }
            });
        } else {
          this.setState({
            isLoading: false,
          });
        }
      }
    
      render() {
    
        const {
          isLoading,
          token,
          signUpError,
          signInError,
          signInEmail,
          signInPassword,
          signUpFirstName,
          signUpLastName,
          signUpEmail,
          signUpPassword
        } = this.state;
        
        if (isLoading) {
          return (<div><p>Loading...</p></div>);
        }
        
        if (!token) {
          return (
            <div>
             <div>
               {
                 (signInError) ? (
                   <p>{ signInError }</p>
                 ) : (null)
               }
               <p>Sign In</p>
               <input type="text" placeholder="Email" value={signInEmail} onChange={this.onTextboxChangeSignInEmail}/>
               <input type="text" placeholder="Password" value={signInPassword} onChange={this.onTextboxChangeSignInPassword}/>
               <button onClick={this.onSignIn} style="">Sign In</button>
             </div>
              <br/><br/>
              <div>
                {
                  (signUpError) ? (
                    <p>{ signUpError }</p>
                  ) : (null)
                }
                <p>Sign Up</p>
                <input type="text" placeholder="First name" value={signUpFirstName} onChange={this.onTextboxChangeSignUpFirstName}/>
                <input type="text" placeholder="Last name" value={signUpLastName} onChange={this.onTextboxChangeSignUpLastName}/>
                <input type="text" placeholder="Email name" value={signUpEmail} onChange={this.onTextboxChangeSignUpEmail}/>
                <input type="text" placeholder="Password" value={signUpPassword} onChange={this.onTextboxChangeSignUpPassword}/>
                <button onClick={this.onSignUp}>Sign Up</button>
              </div>
            </div>
          );
        }
    
        return(
          <div>
            <TodoList/>
            <button onClick={this.logout}>Logout</button>
          </div>
        );
    
      }
    }
    
    export default Home;

    ` enter image description here

    页面重新加载,在控制台中出现此错误。我删除了我有一两个内嵌样式。读完这个问题后 React inline style - style prop expects a mapping from style properties to values, not a string 我删除了所有样式。但我的错误没有消失。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Rialgar    7 年前
    <button onClick={this.onSignIn} style="">Sign In</button>
    

    删除样式属性或将其替换为对象。

    https://reactjs.org/docs/dom-elements.html#style