從另一個組件反應鈎子設置狀態

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') }} /> ); };