React - 使用状态来更新值，或不使用

Question

我有一个有两列的表格。左列是右列的建议值。我目前提供了来自单独 API 调用的两个值。这是有效的。这是当前的代码：const dbContact = useDbContact(contact.Group); 这将设置当前值的值，contact.Group从传递到 API 调用的建议值。然后我稍后用它来调用表单输入值：<Form.Row>     <Form.Group as={Col} controlId="currentSecName" className="mb-2">        <Form.Control type="input" name="1secname" value={contact.SecretaryName} readOnly />    </Form.Group>    <Form.Group as={Col} controlId="dbSecName" className="mb-2">        <Form.Control type="input" name="2secname" value={dbContact.SecretaryName} readOnly />    </Form.Group>    <Button className="PrimaryButton" size="sm">        Accept proposed    </Button>    <div class="divider" /></Form.Row>现在我已经完成了所有这些工作，我的下一步是让“接受”按钮根据建议更新当前值。我的代码是这样的：const dbContact = useDbContact(contact.Group);const [dbSecName, setDbSecName] = useState(dbContact.SecretaryName)和<Form.Control type="input" name="2secname" value={dbSecName} readOnly /> 这将允许我更改状态值“onClick”当我这样做时，我得到'dbContact.SecretaryName is undefined'。现在，我假设考虑到我在测试期间直接请求表单中的值，我很幸运在请求之前已填充该值，因此 API 调用可能存在问题。这是 API 调用：  async function getData(group) {    try {      const apiGroups = await API.graphql(graphqlOperation(queries.getNtig, { PK: "Group#" + group, SK: "Officers#2" }));      let listItem = await apiGroups.data.getNTIG;      let PK = await apiGroups.data.getNTIG.PK.split("#")[1];      let secJson = await JSON.parse(apiGroups.data.getNTIG.Secretary);      let id = 1;      let receivedItems = {        Id: id,        PK: PK,        SecretaryName: secJson.Name,      };      setList(receivedItems);    } catch (err) {}  }  useEffect(() => {    if (!isAuthenticated) {      return;    }    getData(group);  }, [isAuthenticated, group]);  console.log(list);  return list;}我希望有人可以帮助我纠正逻辑以便设置状态值有效，或者更改表单输入值的替代方法。

Answer 1

我不确定这是否是正确的方法，但它有效，并且还解决了在重新渲染元素时、当状态值因 API 调用而更改时更改不受控制的元素的额外问题。

这是我从 API 调用获取值并最初设置状态的地方：

 const dbContact = useDbContact(contact.Group);

 const [dbSecName, setDbSecName] = useState("");

然后，我使用 useEffect 和异步函数来等待 API 调用的值，并使用该值设置状态：

useEffect(() => {

    async function getDbContact() {

        let secName = await dbContact.SecretaryName;

        setDbSecName(secName);

        }

    getDbContact();

}, [dbContact.SecretaryName]);

然后我可以使用表单输入中的值：

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

显然，我需要处理表单输入中的状态更改，但这现在应该很简单。

我不是开发人员，所以如果有更好的答案出现，我会很高兴看到它。现在看来，我自己的问题已经解决了。