Question

当我从父组件传递状态向下时，setState不断抛出错误，指出setEmail不是事件更改函数。我想知道是否对此有一个简单的解决方法。

当我尝试在电子邮件输入中输入字符串时，会引发以下错误：

错误：未处理的运行时错误 TypeError：setEmail不是函数

父组件：（Next.js应用程序）

import React, { useState, useContext, useEffect } from "react";
import "../styles/globals.css";
import "bootstrap/dist/css/bootstrap.min.css";

function MyApp({ Component, pageProps }) {
  const [tester, setTester] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <Component
      {...pageProps}
      email={email}
      setEmail={setEmail}
      password={password}
      setPassword={setPassword}
    />
  );
}

export default MyApp;

子组件：

export default function Signup(props) {
  const router = useRouter();
  
  const { email, setEmail, password, setPassword, setHasAccount } = props;

// function to handle submitting a new user on click
  const onSubmit = (event) => {
    event.preventDefault();
    router.push("/questions");

  };
  return (
    <div>
      <div>
        <Container>
          <form onSubmit={onSubmit} className={styles.formSize}>
            <FormGroup>
              <Input
                className={styles.inputContainer}
                value={email}
                placeholder="john.doe@example.com"
                onChange={(e) => setEmail(e.target.value)}
              />
              <Input
                className={styles.inputContainer}
                placeholder="password"
                value={password}
                onChange={(event) => setPassword(event.target.value)}
              />
              <Button color="primary" type="submit">
                Signup
              </Button>
              <p
                className={styles.loginPhrase}
                onClick={(event) => {
                  event.preventDefault();
                  setHasAccount(true);
                }}
              >
                Have an account? Login Here
              </p>
            </FormGroup>
          </form>
        </Container>
      </div>
      <link rel="icon" href="/favicon.ico" />
    </div>
  );
}

Answer 1

我拿走了您的代码并将其移植到沙盒中，它的工作正常，我认为您错误地传递了道具。这是沙盒的一个副本，因此您可以看到它正在运行

https://codesandbox.io/s/gallant-microservice-yig2q?file=/src/App.js

Answer 2

您需要检查该组件的父级是否传入了名为setEmail的prop，并且它是一个函数。看来您可能忘记了将其作为道具传递。

尝试更改输入onChange时遇到状态错误

2 个答案: