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

Posted 2023-03-08

【中文标题】如何将 apollo 查询数据放入受控输入？

【英文标题】：How do you put apollo query data into a controlled input?

【发布时间】：2019-04-20 05:41:11

【问题描述】：

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

我知道如何做到这一点的唯一方法是使用componentDidUpdate 或getDerivedStateFromProps。 React 文档非常清楚地表明，使用这些函数是不好的做法，尤其是在处理输入时......那么我们应该怎么做呢？我一定在这里遗漏了一些非常明显的东西。

【问题讨论】：

这是个好问题。我认为在这种情况下，将您想要使用的值放在input 字段中，在组件的状态下就好了。正如你所说，控制输入需要一个受控组件。所以，假设你有一个App.js，它获取一些数据并呈现一个Form.js 组件，它有一些输入字段。如果您以这种方式构建您的应用程序，我认为您不需要使用componentDidUpdate，因为一旦您获取数据，将其传递给独立组件等。 Form.js 又拥有自己的状态！

也许我遗漏了一些东西，但是根据您的解释，props -> 组件状态步骤仍然需要发生。今天我在考虑这个问题，我开始怀疑这种事情是否需要通过 componentDidMount 中的 apollo api 进行手动查询。

是的，我的意思是container 获取数据，child 接收一次作为道具。也许为此做一个简单的codesandbox.io/dashboard 是个好主意！如果有，请分享！

【参考方案1】：

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

基本上，等到你有了数据，然后呈现你的表单/输入。将来自 apollo 的数据向下传递并在表单/输入构造函数中设置初始状态。然后像平常一样使用 setState 。

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

【讨论】：

为什么会有问题？您可以创建一个基于给定 API 更新数据的方法！

【参考方案2】：

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

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

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