时间戳

首页 > 解决方案 > 如何将 apollo 查询数据放入受控输入？

reactjs - 如何将 apollo 查询数据放入受控输入？

问题描述

所以使用 Apollo 的<Query>组件，我可以很好地获取数据。在某些时候，我将不得不将其中一些数据输入到用户输入中。我希望控制这个输入，这意味着数据需要处于组件状态。所以似乎我需要将来自 Apollo 查询的数据转换为组件状态，或者更准确地说，来自 Apollo 查询的数据 -> 作为组件 prop -> 组件状态传递下来。

我知道如何实现这一目标的唯一方法是使用componentDidUpdateor getDerivedStateFromProps。React 文档非常清楚地表明，使用这些函数是不好的做法，尤其是在处理输入时……那么我们应该怎么做呢？我必须在这里遗漏一些非常明显的东西。

标签： reactjsgraphqlapollo

解决方案

我以一种复杂的形式遇到了这个问题，其中保存一个值可能会影响其他输入占位符值。我仍然有受控组件，但只是添加useEffect以查看来自 Apollo 的值是否已更改。


 const [value, setValue] = React.useState(apolloValue);

  React.useEffect(() => {
    setValue(apolloValue);
  }, [apolloValue]);

推荐阅读