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>

现在我已经完成了所有这些工作，我的下一步是让 'accept' 按钮用建议的值更新当前值。我的代码是这样的：

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 调用中获取值的地方，最初是 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 />

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

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

React - 是否使用状态来更新值

React - using state to update values, or not

javascript

reactjs

use-state