React - 是否使用状态更新值 [英] React - using state to update values, or not

问题描述

我有一个包含两列的表单.左列是右列的建议值.我目前从单独的 API 调用中呈现这两个值.这是有效的.

I have a form with two columns. The left column is a proposed value for the right column. I currently present both values from separate API calls. This is working.

这是当前代码:

const dbContact = useDbContact(contact.Group); 这将设置当前值的值，contact.Group 来自传递给 API 调用的建议值.

const dbContact = useDbContact(contact.Group); This sets the value of the current values, contact.Group from the proposed values being passed to the API call.

我后来用它来调用表单输入值:

I then later use this to call the form input value:

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

现在我已经完成了所有这些工作，下一步是让接受"按钮使用建议的值更新当前值.我的代码是这样的:

Now I have all this working, my next step was to make the 'accept' button update the current value with the proposed. My code being something like this:

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

和

这将允许我更改状态值onClick"

which would allow me to change the state value 'onClick'

当我这样做时，我得到一个 'dbContact.SecretaryName is undefined'.现在，我假设考虑到我直接在表单中请求值，在测试期间，我很幸运在被请求之前填充了该值，因此 API 调用可能有问题.

When I do this though, I get a 'dbContact.SecretaryName is undefined'. Now, I'm assuming that considering I asked for the value in the form directly, during testing, I was lucky that the value was populated before being asked for so there's potentially something wrong with the API call.

这是 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;
}

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

What I'm hoping someone can help me with is either correcting the logic so the setting the state value works, or an alternative to changing the form input value.

推荐答案

我不确定这是否是执行此操作的正确方法，但它有效并且还解决了更改不受控制的元素的附加问题，当当 API 调用导致状态值发生变化时，元素会重新呈现.

I'm not sure if this is the correct way to do this, but it works and it also resolves an additional problem of changing an uncontrolled element, when the element is re-rendered, when the state value changes from the API call.

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

This is where I get the values from the API call and initally setState:

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

然后我将 useEffect 与异步函数一起使用以等待来自 API 调用的值并使用该值设置状态:

I then use useEffect with an async function to wait for the value from the API call and setState using that value:

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

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

I can then use the value in the form input:

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

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

Obviously I need to handle the state change in the form input but that should now be straight forward.

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

I'm no developer so if a better answer comes along I'd be pleased to see it. For now, I seem to have resolved my own problem.

这篇关于React - 是否使用状态更新值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！