反應 - 使用 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 更改，但現在應該直截了當。

我不是開發人員，所以如果有更好的答案出現，我會很高興看到它。 現在，我似乎已經解決了我自己的問題。