Question

有两个组成部分，一个是<Form />，另一个是<LoginForm />。 <LoginForm />看起来像

const LoginForm = () => {
   return (
      <Form
         inputs={[
             //some objects here               
         ]}
         onSubmit={(data, setError) => {
             setError('some error')
         }}
      />
   );
};

<Form />组件的外观如下。

const Form = ({onSumbit, inputs}) => {
   const [error, setError] = useState(''); 
   return (
      <>
         {error ? <div>{error}</div> : null}
         {//rendering inputs here}
         <button onClick={() => onSubmit('some data which is not relative to problem', setError)}>
      </>
    )
}

现在，在onSubmit()上单击按钮时，应该运行。并且它应该调用setError，它应该显示一些错误，但是不显示任何错误。它也没有显示任何类型的错误。

注意：这只是代码的相关部分。代码实际上很大。但是我敢肯定，只有这部分有一些基本的缺陷。

Answer 1

有时您声明了onSumbit，有时是onSubmit，则需要保持一致：

const LoginForm = () => {
  return (
    <Form
      onSubmit={(data, setter) => {
        setter('some error');
      }}
    />
  );
};

const Form = ({ onSubmit, inputs }) => {
  const [error, setError] = useState('');
  return (
    <>
      {error ? <div>{error}</div> : null}
      <button
        onClick={() => {
          onSubmit('some data which is not relative to problem', setError);
        }}
      >
        Submit
      </button>
    </>
  );
};

Answer 2

您以前有拼写错误和语法错误，因此无论如何都无法为您解决。

这似乎可以满足您的要求。

const Form = ({ onSubmit, inputs }) => {
  const [error, setError] = useState('');

  return (
    <>
      {error ? <div>{error}</div> : null}
      {// rendering inputs here
      }
      <button onClick={() => onSubmit('data', setError)} />
    </>
  );
};

Answer 3

这是我的代码。工作正常。也许您的代码中有一些错字。

const Form = ({onSubmit, inputs}) => {
  const [error, setError] = useState(''); 
  return (
    <>
        {error ? <div>{error}</div> : null}
        <button onClick={() => onSubmit('some data which is not relative to problem', setError)}>
          Hi
        </button>
    </>
  )
}

const LoginForm = () => {
  return (
     <Form
        inputs={[
            //some objects here               
        ]}
        onSubmit={(data, setError) => {
            setError('some error')
        }}
     />
  );
};

从另一个组件设置状态反应钩子

3 个答案: