Reactjs 我有一个表单组件正在传递给App.js，但是我收到了这个错误_Reactjs

Reactjs 我有一个表单组件正在传递给App.js，但是我收到了这个错误

reactjs

Reactjs 我有一个表单组件正在传递给App.js，但是我收到了这个错误,reactjs,Reactjs,渲染应用程序时出现此错误。签名（…）：未从呈现返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回null 签名 import React, { useState, useRef } from "react"; import axios from "axios"; import swal from "sweetalert"; import "./SignUp.css"; import image from './img/signup.jpg' const SignIn

渲染应用程序时出现此错误。签名（…）：未从呈现返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回null

签名

import React, { useState, useRef } from "react";
import axios from "axios";
import swal from "sweetalert";
import "./SignUp.css";
import image from './img/signup.jpg'




const SignIn = () => {
  const [creds, setCreds] = useState({ userName: "", password: "" });
  const usernameFieldRef = useRef();
  const passwordFieldRef = useRef();


  const changeHandler = e => {
    setCreds({ ...creds, [e.target.name]: e.target.value });
  };

  const handleSubmit = event => {
    event.preventDefault();
    console.log('login');
    const username = usernameFieldRef.current.value;
    const password = passwordFieldRef.current.value;
    axios
      .post("https://foodiefun-api.herokuapp.com/api/auth/login", {
        username,
        password
      })
      .then(res => {
        console.log("DATA", res.data)
        localStorage.setItem('token', res.data.token)
        swal(
          "Welcome to Foodie Fun!",
          "You are now signed in, enjoy your stay!",
          "success"
        );
      })
      .catch(err => {
        console.log('LOGIN FAILED', err.response); // There was an error creating the data and logs to console
      });


    return (
      <div class="page-content">
        <div class="form-v6-content">
          <div class="form-left">
            <img className="form-image" style={{ linearGradient: "red, blue", opacity: ".6" }} src={image} alt="form" />
          </div>
          <form
            onSubmit={handleSubmit}
            class="form-detail"
            method="post">
            <h2>Register Form</h2>
            <div class="form-row">
              <input
                ref={usernameFieldRef}
                onChange={changeHandler}
                // value={creds.userName}
                type="text"
                name="id"
                id="user-name"
                class="input-text"
                placeholder="Enter Desired User Name"
                required />
            </div>
            <div class="form-row">
              <input
                ref={passwordFieldRef}
                onChange={changeHandler}
                value={creds.password}
                type="password"
                name="password"
                id="password"
                class="input-text"
                placeholder="Password"
                required />
            </div>
            <div class="form-row">
              <input
                type="password"
                name="comfirm-password"
                id="comfirm-password"
                class="input-text"
                placeholder="Comfirm Password"
                required />
            </div>
            <div class="form-row-last">
              <input type="submit"
                name="register"
                class="register"
                value="Register" />
            </div>
          </form>
        </div>
      </div>
    )

  }
}


export default SignIn

import React，{useState，useRef}来自“React”；
从“axios”导入axios；
从“sweetalert”导入swal；
导入“/SignUp.css”；
从“./img/signup.jpg”导入图像
常量符号=（）=>{
const[creds，setCreds]=useState（{用户名：，密码：}）；
const usernameFieldRef=useRef（）；
const passwordFieldRef=useRef（）；
常量changeHandler=e=>{
setCreds（{…creds[e.target.name]：e.target.value}）；
};
const handleSubmit=事件=>{
event.preventDefault（）；
log（'login'）；
const username=usernameFieldRef.current.value；
const password=passwordFieldRef.current.value；
axios
.post（“https://foodiefun-api.herokuapp.com/api/auth/login", {
用户名，
密码
})
。然后（res=>{
console.log（“数据”，res.DATA）
localStorage.setItem（'token'，res.data.token）
游泳(
“欢迎来到美食家之乐！”，
“您现在已登录，祝您入住愉快！”，
“成功”
);
})
.catch（错误=>{
console.log（'LOGIN FAILED'，err.response）；//在控制台中创建数据和日志时出错
});
返回(
登记表
)
}
}
导出默认签名

App.js

import React, { useState } from "react";
import "./App.css";

import Form from "./Components/SignIn";
import ReviewForm from "./Components/ReviewForm/ReviewForm";
import UserInfo from "./Components/userInfo";
import mockarray from "./Components/mockarray";
import Navbar from "./Components/Navbar";
import RecipeApp from "./recipes/RecipeApp";
import SignUp from "./Components/SignUp";
import SignIn from "./Components/SignIn";

const App = () => {
  const [reviews, setReviews] = useState([]);

  const addReview = restaurant => {
    setReviews([...reviews, { ...restaurant, id: Date.now() }]);
  };

  return (
    <div className="App">
      <Navbar />
      <SignUp />
      <SignIn />
      {/* <RecipeApp /> */}
      {/* <ReviewForm /> */}
      {/* <ReviewForm addReview={addReview} /> */}
      {console.log(reviews)}
      {/* <UserInfo data = {mockarray} /> */}
    </div>
  );
};

export default App;

import React，{useState}来自“React”；
导入“/App.css”；
从“/Components/SignIn”导入表单；
从“/Components/ReviewForm/ReviewForm”导入审阅表单；
从“/Components/UserInfo”导入用户信息；
从“/Components/mockarray”导入mockarray；
从“/Components/Navbar”导入导航栏；
从“/recipes/RecipeApp”导入RecipeApp；
从“/Components/SignUp”导入注册；
从“/Components/SignIn”导入登录；
常量应用=（）=>{
const[reviews，setReviews]=useState（[]）；
const addReview=餐厅=>{
setReviews（[…reviews，{…restaurant，id:Date.now（）}]）；
};
返回(
{/*  */}
{/*  */}
{/*  */}
{console.log（评论）}
{/*  */}
);
};
导出默认应用程序；

应该在屏幕上呈现两个表单，但当我在登录页面中进行注释时，我会出现此错误。有几个人看过了，他们都说一切都是对的。我被难住了

您的

return

语句在

handleSubmit

函数中。

不确定是问题代码还是实际代码中的拼写错误，但

return

在

handleSubmit

中

import React, { useState, useRef } from 'react'
import axios from 'axios'
import swal from 'sweetalert'
import './SignUp.css'
import image from './img/signup.jpg'

const SignIn = () => {
    const [creds, setCreds] = useState({ userName: '', password: '' })
    const usernameFieldRef = useRef()
    const passwordFieldRef = useRef()

    const changeHandler = e => {
        setCreds({ ...creds, [e.target.name]: e.target.value })
    }

    const handleSubmit = event => {
        event.preventDefault()
        console.log('login')
        const username = usernameFieldRef.current.value
        const password = passwordFieldRef.current.value
        axios
            .post('https://foodiefun-api.herokuapp.com/api/auth/login', {
                username,
                password
            })
            .then(res => {
                console.log('DATA', res.data)
                localStorage.setItem('token', res.data.token)
                swal(
                    'Welcome to Foodie Fun!',
                    'You are now signed in, enjoy your stay!',
                    'success'
                )
            })
            .catch(err => {
                console.log('LOGIN FAILED', err.response) // There was an error creating the data and logs to console
            })
    }

    return (
        <div className="page-content">
            <div className="form-v6-content">
                <div className="form-left">
                    <img
                        className="form-image"
                        style={{ linearGradient: 'red, blue', opacity: '.6' }}
                        src={image}
                        alt="form"
                    />
                </div>
                <form onSubmit={handleSubmit} className="form-detail" method="post">
                    <h2>Register Form</h2>
                    <div className="form-row">
                        <input
                            ref={usernameFieldRef}
                            onChange={changeHandler}
                            // value={creds.userName}
                            type="text"
                            name="id"
                            id="user-name"
                            className="input-text"
                            placeholder="Enter Desired User Name"
                            required
                        />
                    </div>
                    <div className="form-row">
                        <input
                            ref={passwordFieldRef}
                            onChange={changeHandler}
                            value={creds.password}
                            type="password"
                            name="password"
                            id="password"
                            className="input-text"
                            placeholder="Password"
                            required
                        />
                    </div>
                    <div className="form-row">
                        <input
                            type="password"
                            name="comfirm-password"
                            id="comfirm-password"
                            className="input-text"
                            placeholder="Comfirm Password"
                            required
                        />
                    </div>
                    <div className="form-row-last">
                        <input
                            type="submit"
                            name="register"
                            className="register"
                            value="Register"
                        />
                    </div>
                </form>
            </div>
        </div>
    )
}

export default SignIn

import React，{useState，useRef}来自“React”
从“axios”导入axios
从“sweetalert”导入swal
导入“./SignUp.css”
从“./img/signup.jpg”导入图像
常量符号=（）=>{
const[creds，setCreds]=useState（{用户名：''，密码：'}）
const usernameFieldRef=useRef（）
const passwordFieldRef=useRef（）
常量changeHandler=e=>{
setCreds（{…creds[e.target.name]：e.target.value}）
}
const handleSubmit=事件=>{
event.preventDefault（）
console.log（'login'）
const username=usernameFieldRef.current.value
const password=passwordFieldRef.current.value
axios
.post（'https://foodiefun-api.herokuapp.com/api/auth/login', {
用户名，
密码
})
。然后（res=>{
console.log（'DATA'，res.DATA）
localStorage.setItem（'token'，res.data.token）
游泳(
“欢迎来到美食之旅！”，
“您现在已登录，祝您入住愉快！”，
“成功”
)
})
.catch（错误=>{
console.log（'LOGIN FAILED'，err.response）//在控制台中创建数据和日志时出错
})
}
返回(
登记表
)
}
导出默认签名

您需要在handleSubmit函数之外返回您的状态：

import React, { useState, useRef } from "react";
    import axios from "axios";
    import swal from "sweetalert";
    import "./SignUp.css";
    import image from './img/signup.jpg'




    const SignIn = () => {
      const [creds, setCreds] = useState({ userName: "", password: "" });
      const usernameFieldRef = useRef();
      const passwordFieldRef = useRef();


      const changeHandler = e => {
        setCreds({ ...creds, [e.target.name]: e.target.value });
      };

      const handleSubmit = event => {
        event.preventDefault();
        console.log('login');
        const username = usernameFieldRef.current.value;
        const password = passwordFieldRef.current.value;
        axios
          .post("https://foodiefun-api.herokuapp.com/api/auth/login", {
            username,
            password
          })
          .then(res => {
            console.log("DATA", res.data)
            localStorage.setItem('token', res.data.token)
            swal(
              "Welcome to Foodie Fun!",
              "You are now signed in, enjoy your stay!",
              "success"
            );
          })
          .catch(err => {
            console.log('LOGIN FAILED', err.response); // There was an error creating the data and logs to console
          });




      }
        return (
            <div class="page-content">
                <div class="form-v6-content">
                    <div class="form-left">
                        <img className="form-image" style={{ linearGradient: "red, blue", opacity: ".6" }} src={image} alt="form" />
                    </div>
                    <form
                        onSubmit={handleSubmit}
                        class="form-detail"
                        method="post">
                        <h2>Register Form</h2>
                        <div class="form-row">
                            <input
                                ref={usernameFieldRef}
                                onChange={changeHandler}
                                // value={creds.userName}
                                type="text"
                                name="id"
                                id="user-name"
                                class="input-text"
                                placeholder="Enter Desired User Name"
                                required />
                        </div>
                        <div class="form-row">
                            <input
                                ref={passwordFieldRef}
                                onChange={changeHandler}
                                value={creds.password}
                                type="password"
                                name="password"
                                id="password"
                                class="input-text"
                                placeholder="Password"
                                required />
                        </div>
                        <div class="form-row">
                            <input
                                type="password"
                                name="comfirm-password"
                                id="comfirm-password"
                                class="input-text"
                                placeholder="Comfirm Password"
                                required />
                        </div>
                        <div class="form-row-last">
                            <input type="submit"
                                name="register"
                                class="register"
                                value="Register" />
                        </div>
                    </form>
                </div>
            </div>
        )
    }


    export default SignIn

import React，{useState，useRef}来自“React”；
从“axios”导入axios；
从“sweetalert”导入swal；
导入“/SignUp.css”；
从“./img/signup.jpg”导入图像
常量符号=（）=>{
const[creds，setCreds]=useState（{用户名：，密码：}）；
const usernameFieldRef=useRef（）；
const passwordFieldRef=useRef（）；
常量changeHandler=e=>{
setCreds（{…creds[e.target.name]：e.target.value}）；
};
const handleSubmit=事件=>{
event.preventDefault（）；
log（'login'）；
const username=usernameFieldRef.current.value；
const password=passwordFieldRef.current.value；
axios
.post（“https://foodiefun-api.herokuapp.com/api/auth/login", {
用户名，
密码
})
。然后（res=>{
console.log（“数据”，res.DATA）
localStorage.setItem（'token'，res.data.token）
游泳(
“欢迎来到美食家之乐！”，
“您现在已登录，祝您入住愉快！”，
“成功”
);
})
.catch（错误=>{