使用 useReducer 而不是 JSX 时反应渲染 [object Object]答案

【问题标题】：React render [object Object] when using useReducer instead of JSX使用 useReducer 而不是 JSX 时反应渲染 [object Object]
【发布时间】：2021-10-19 17:29:33
【问题描述】：

所以我今天在 Udemy 上学习我的 React 课程时遇到了一个错误，即 React 应用程序呈现 [object Object] 而不是 JSX（应该是一个空的输入框），因为输入框有 onChange方法，输入的值也是无法改变的。这是应用程序的图像以及下面给出的代码：-


import React, { useState, useEffect, useReducer } from "react";

import Card from "../UI/Card/Card";
import classes from "./Login.module.css";
import Button from "../UI/Button/Button";

const emailReducer = (state, action) => {
  if(action.type === 'USER_INPUT'){
    return {value: action.value, isValid: action.value.includes('@')};
  }
  if(action.type === 'INPUT_BLUR'){
    return {value: state.value, isValid: state.value.includes('@')};
  }
  return { value: '', isValid: false };
};

const Login = (props) => {
  // const [enteredEmail, setEnteredEmail] = useState("");
  // const [emailIsValid, setEmailIsValid] = useState();
  const [enteredPassword, setEnteredPassword] = useState("");
  const [passwordIsValid, setPasswordIsValid] = useState();
  const [formIsValid, setFormIsValid] = useState(false);

  const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: '',
    isValid: false
  });

  useEffect(() => {
    console.log("EFFECT RUNNING");

    return () => {
      console.log("EFFECT CLEANUP");
    };
  }, []);

  const emailChangeHandler = (event) => {
    dispatchEmail({type: 'USER_INPUT', value: event.target.value});

    setFormIsValid(
      emailState.isValid && enteredPassword.trim().length > 6
    );
  };

  const passwordChangeHandler = (event) => {
    setEnteredPassword(event.target.value);

    setFormIsValid(
      emailState.isValid && event.target.value.trim().length > 6
    );
  };

  const validateEmailHandler = () => {
    dispatchEmail({type: 'INPUT_BLUR'});
  };

  const validatePasswordHandler = () => {
    setPasswordIsValid(enteredPassword.trim().length > 6);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    props.onLogin(emailState.value, enteredPassword);
  };

  return (
    <Card className={classes.login}>
      <form onSubmit={submitHandler}>
        <div
          className={`${classes.control} ${
            emailState.isValid === false ? classes.invalid : ""
          }`}
        >
          <label htmlFor="email">E-Mail</label>
          <input
            id="email"
            value={emailState}
            onChange={emailChangeHandler}
            onBlur={validateEmailHandler}
          />
        </div>
        <div
          className={`${classes.control} ${
            passwordIsValid === false ? classes.invalid : ""
          }`}
        >
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            value={enteredPassword}
            onChange={passwordChangeHandler}
            onBlur={validatePasswordHandler}
          />
        </div>
        <div className={classes.actions}>
          <Button type="submit" className={classes.btn} disabled={!formIsValid}>
            Login
          </Button>
        </div>
      </form>
    </Card>
  );
};

export default Login;

【问题讨论】：

标签： javascript reactjs react-hooks use-reducer

【解决方案1】：

您的emailState 是一个具有以下形状的对象：

{ value: string, isValid: boolean }

因此，在您的输入字段中，您需要使用value 属性：

          <input
            id="email"
            value={emailState.value}
            onChange={emailChangeHandler}
            onBlur={validateEmailHandler}
          />

【讨论】：

【解决方案2】：

当您可能需要嵌套的 value 属性时，您将整个 emailState 对象传递给输入。您可以将emailState.value 传递给输入的value 属性，或者预先解构状态并直接传递value。

const [{ isValid, value }, dispatchEmail] = useReducer(emailReducer, {
  value: '',
  isValid: false
});

...

<input
  id="email"
  value={value}
  onChange={emailChangeHandler}
  onBlur={validateEmailHandler}
/>

【讨论】：