Question

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

我知道如何实现这一目标的唯一方法是使用componentDidUpdate或getDerivedStateFromProps。 React文档非常清楚地表明使用这些功能是错误的做法，尤其是在处理输入时……那么我们应该怎么做呢？我一定在这里确实缺少一些明显的东西。

Answer 1

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


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

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

Answer 2

我选择走这条路线： Querying and Mutating a Form with Apollo Client GraphQL

基本上，等到有了数据后，再渲染表单/输入。从apollo向下传递数据，并在form / input构造函数中设置初始状态。然后像平常一样使用setState。

我有点失望，因为如果我想在第一次渲染后从另一个graphql查询更新表单中的数据怎么办？在这种情况下，您似乎很不走运。

您如何将阿波罗查询数据放入受控输入中？

2 个答案: