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 调用获取值并最初设置状态的地方：&nbsp;const dbContact = useDbContact(contact.Group);&nbsp;const [dbSecName, setDbSecName] = useState("");然后，我使用 useEffect 和异步函数来等待 API 调用的值，并使用该值设置状态：useEffect(() => {&nbsp; &nbsp; async function getDbContact() {&nbsp; &nbsp; &nbsp; &nbsp; let secName = await dbContact.SecretaryName;&nbsp; &nbsp; &nbsp; &nbsp; setDbSecName(secName);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; getDbContact();}, [dbContact.SecretaryName]);然后我可以使用表单输入中的值：<Form.Control type="input" name="2secname" value={dbSecName || ""} readOnly />显然，我需要处理表单输入中的状态更改，但这现在应该很简单。我不是开发人员，所以如果有更好的答案出现，我会很高兴看到它。现在看来，我自己的问题已经解决了。