反应状态没有得到更新 onClick

Question

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

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

我的代码如下：上下文：

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，用户窗体应呈现案例 2，即下一个窗体。或者至少它应该发生但它没有 :)

有人帮忙吗？

Answer 1

您的步骤函数有误。您应该从

中删除 .step

他们应该

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

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

反应状态没有得到更新 onClick

React State not getting updated onClick

reactjs

react-context

react-forms