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调用和initally-setState:获得值的地方

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

显然，我需要处理表单输入中的状态变化，但现在应该是直接的。

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