React-挂钩状态未更新

Question

我正在尝试使用状态将一个表单输入值复制到另一个表单输入值，但状态没有更新

我创建了一个带有按钮的表单，其中左侧表单输入的值应复制到右侧表单输入。这是我的代码：

const ReviewContactForm = (props) => {
  const contact = props.currentContact;
  const dbContact = useDbContact(contact.Group);
  const [dbSecName, setDbSecName] = useState("");

async function getDbContact() {
    let secName = await dbContact.SecretaryName;
    setDbSecName(secName);
   }
getDbContact();

function acceptSecName(e) {
    e.preventDefault();
    setDbSecName(contact.SecretaryName);
  }

return (
    <>
        <Form>
          <Form.Row>Secretary's Name</Form.Row>
          <Form.Row>
            <Form.Group as={Col} className="mb-2">
            <Form.Control type="input" name="1secname" value={contact.SecretaryName} readOnly />
            </Form.Group>

            <Form.Group as={Col} className="mb-2">
            <Form.Control type="input" name="2secname" value={dbSecName || ""} readOnly />
            </Form.Group>
            
            <Button className="PrimaryButton" onClick={acceptSecName}>
              Accept proposed
            </Button>
            <div className="divider" />
            <Button className="SecondaryButton" size="sm">
              Revert
            </Button>
          </Form.Row>
        </Form>
    </>
  );
};

无论我做什么，dbSecName的状态都不会改变。我试着设置一个新的常量。我尝试使onclick函数异步并等待。如果我为我试图设置的变量的值添加console.log，我可以正确地看到它，但是dbSecName的console.log总是显示原始值。

我真的不知道下一步该怎么办。我在想，也许我最初设置表单输入的方法是错误的。

因此，我试图实现的是，当单击“Accept proposed”按钮时，“2secname”表单输入将使用“1secname”中的值重新呈现。

非常感谢任何帮助

Answer 1

在下面的代码片段中

<Form.Control type="input" name="2secname" value={dbSecName || ""} readOnly />

将值替换为仅dbSecName，而不是dbSecName | |“

看看这是否有效