0

我是 ReactJS 的新手，我正在开发一个简单的应用程序来显示用户输入数据的 2 个屏幕（单个应用程序，无路由），然后一个屏幕显示所有数据，您可以单击一个虚拟提交按钮，上面写着“成功”。我正在使用上下文和 2 个状态。一个用于跟踪我的位置，另一个用于更新用户信息。

第一页效果很好，但是当我单击继续时，我希望我的步骤变为 2 并呈现下一个屏幕，没有任何反应，我得到一个空白屏幕。我的步骤永远不会更新，并且在控制台中我看到一个错误“未捕获的异常：渲染没有返回任何内容。这通常意味着缺少返回语句。或者，不渲染任何内容，返回 null。”

我拥有的代码如下： 上下文：

import React, {useState, useEffect} from 'react';
const Context = React.createContext()

function ContextProvider ({children}) {
  
  const [userData, setUserData]  = useState({
    firstName: "",
    lastName: "",
    email: "",
    occupation: "",
    city: "",
    bio: ""
  })
  const [step, setStep] = useState(1)
  
  const {firstName, lastName, email, occupation, city, bio} = userData
  const values = {firstName, lastName, email, occupation, city, bio}

  // Proceed to next step
  function nextStep () { 
    setStep(prevState => prevState.step + 1)
  }

  // Go back to prev step
  function prevStep () {
    setStep(prevState => prevState.step - 1)
  }

  // Handle fields change
  function handleChange (e) {
    let value = e.target.value;
    let name = e.target.name;
    setUserData({
      ...userData,
      [name]: value
    })
  }

  return (
    <Context.Provider value={{userData, step, values, nextStep, prevStep, handleChange}}>
      {children}
    </Context.Provider>
  )
}


export {ContextProvider, Context}

应用程序：

import logo from './logo.svg';
import './App.css';

import React from 'react';
import UserForm from "./components/UserForm"

function App() {
  return (
    <div className="App">
      <UserForm />
    </div>
  );
}

export default App;

用户窗体：

import React, {useState, useContext} from "react";
import {Context} from "../UserFormContext"

import FormUserDetails from './FormUserDetails';
import FormPersonalDetails from './FormPersonalDetails';
import Confirm from './Confirm';
import Success from './Success';

function UserForm () {
    const {userData, step, values, handleChange, nextStep, prevStep} = useContext(Context)

    switch (step) {
        case 1:
          return (
            console.log(step),
            console.log(userData),
            <FormUserDetails
              nextStep={nextStep}
              handleChange={handleChange}
              values={values}
            />
          )
        case 2:
          return (
            console.log(step),
            <FormPersonalDetails
              nextStep={nextStep}
              prevStep={prevStep}
              handleChange={handleChange}
              values={values}
            />
          )
        case 3:
          return (
            <Confirm
              nextStep={nextStep}
              prevStep={prevStep}
              values={values}
            />
          )
        case 4:
          return <Success />
        default:
          (console.log('This is a multi-step form built with React.'))
    }
}

export default UserForm

表单用户详细信息：

import React, {useState, useContext} from "react";
import {Context} from "../UserFormContext"

import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles'
import Dialog from '@material-ui/core/Dialog'
import AppBar from '@material-ui/core/AppBar'
import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'


export function FormUserDetails () {

  const {userData, step, values, handleChange, nextStep} = useContext(Context)
  
  function Continue (e) {
    e.preventDefault()
    nextStep()
  }

  return (
    <MuiThemeProvider>
      <>
        <Dialog
          open
          fullWidth
          maxWidth='sm'
        >
          <AppBar title="Enter User Details" />
          <TextField
            placeholder="Enter Your First Name"
            label="First Name"
            name="firstName"
            onChange={(e) => {
              handleChange(e, 'name')}}
            defaultValue={userData.firstName}
            margin="normal"
            fullWidth
          />
          <br />
          <TextField
            placeholder="Enter Your Last Name"
            label="Last Name"
            name="lastName"
            onChange={(e) => {
              handleChange(e, 'name')}}
            defaultValue={userData.lastName}
            margin="normal"
            fullWidth
          />
          <br />
          <TextField
            placeholder="Enter Your Email"
            label="Email"
            name="email"
            onChange={(e) => {
              handleChange(e, 'name')}}
            defaultValue={userData.email}
            margin="normal"
            fullWidth
          />
          <br />
          <Button
            color="primary"
            variant="contained"
            onClick={(e) => Continue(e)}
          >Continue</Button>
        </Dialog>
      </>
    </MuiThemeProvider>
  )
}

export default FormUserDetails

当我单击 FormUserDetails 中的继续按钮时，该步骤应更改为 2，并且 UserForm 应呈现案例 2，即下一个表单。或者至少它应该发生但它没有:)

有帮手吗？

4

1 回答 1

2

您的步进函数有错误。你应该.step从他们那里删除

他们应该是

  // Proceed to next step
  function nextStep () { 
    setStep(prevState => prevState + 1)
  }

  // Go back to prev step
  function prevStep () {
    setStep(prevState => prevState - 1)
  }
于 2021-02-22T00:06:52.830 回答