反应 - 使用 state 更新值，或不

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 />

这将允许我更改 state 值“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;
}

我希望有人可以帮助我更正逻辑以便设置 state 值有效，或者更改表单输入值的替代方法。

Answer 1

我不确定这是否是正确的方法，但它有效，并且它还解决了更改不受控制元素的附加问题，当重新渲染元素时，当 state 值从 API 调用更改时。

这是我从 API 调用和初始 setState 中获取值的地方：

 const dbContact = useDbContact(contact.Group);
 const [dbSecName, setDbSecName] = useState("");

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

useEffect(() => {
    async function getDbContact() {
        let secName = await dbContact.SecretaryName;
        setDbSecName(secName);
        }
    getDbContact();
}, [dbContact.SecretaryName]);

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

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

显然，我需要处理表单输入中的 state 更改，但现在应该直截了当。

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