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

Posted 2023-02-22

【中文标题】从另一个组件反应钩子设置状态

【英文标题】：Setting state from another component react hooks

【发布时间】：2020-04-01 18:41:03

【问题描述】：

有两个组件，一个是<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，它应该显示一些错误但它没有显示任何错误。它也没有显示任何错误。

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

【问题讨论】：

已解决：是一个错字 onSumbit 与 onSubmit

【参考方案1】：

您之前有拼写错误和语法错误，因此无论如何这对您都不起作用。

这似乎符合你的意思。

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

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

【讨论】：

我想从父组件setError()<LoginForm />

在您还编辑了原始帖子后进行了编辑以适合您的用例。另外，您为什么要对所有答案投反对票？

首先感谢您抽出时间提问。其次，问题是我刚刚解决的问题。第三，你怎么能说我不赞成答案？

【参考方案2】：

这是我的代码。它工作正常。可能你的代码有错别字。

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】：

有时您声明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>
    </>
  );
;