在 React、Redux-Form 和 GraphQL 中选择输入中的 onChange 事件从数据库中查询

Posted 2023-03-08

【中文标题】在 React、Redux-Form 和 GraphQL 中选择输入中的 onChange 事件从数据库中查询

【英文标题】：Query from database on onChange event inside select input in React, Redux-Form and GraphQL

【发布时间】：2020-06-29 13:23:20

【问题描述】：

当用户从select input 字段（该数据也来自数据库）中选择一台机器时，我正在尝试从数据库中查询。我正在使用 redux-form。我的代码如下：

<div className='universal_form-input'>
  <label>Mechine Name</label>
    <Field
      type='number'
      name='machine'
      component=this.renderSelect
     />
</div>

而select input填上Machine name，value就是对应Machine的id。现在，当用户选择一台机器时，它的状态将更新为该机器的 id 值。

在handleChange 上，我正在尝试调用一个名为queryMachineById 的方法，该方法应该通过特定的machine id 获取数据。并且查询应该从数据库中返回该机器的noOfDispenser。 （顺便说一句，这个查询正在 GraphQL 操场上工作）

handleChange = (event, input) => 
    event.preventDefault();
    const  name, value  = event.target;
    input.onChange(value);
    this.setState( [name]: value );
    setTimeout(() => 
      this.queryMachineById();
    , 1000);
  ;

queryMachineById 方法写法如下：

 queryMachineById = () => 
    const machineId = parseInt(this.state.machine);
    console.log(typeof machineId, machineId);
    return (
      <Query query=MACHINE_BY_ID_QUERY variables= machineId >
        ( data, loading, error ) => 
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error</p>;
          console.log(data);
          return data.machineById.map(
            machine => (initialValues.dispenserNo = machine.noOfDispensers)
          );
        
      </Query>
    );
  ;

machineId 也使用来自状态的有效id 进行更新。但是queryMachineById 中的console.log(data) 没有显示任何内容，甚至没有空

我的GraphQL query 看起来像这样：

export const MACHINE_BY_ID_QUERY = gql`
  query MACHINE_BY_ID_QUERY($machineId: Int!) 
    machineById(machineId: $machineId) 
      id
      noOfDispensers
    
  
`;

onClick 也不起作用。

【问题讨论】：

raact basic - 你不能从事件处理程序中渲染...提示：'点击查询'

我以前从未构建过这种类型的应用程序。而且我尝试添加的功能以前从未做过。如果不问愚蠢的问题和犯愚蠢的错误，没有人可以成为专家。在没有适当解释的情况下不喜欢这个问题，你就是在劝阻提出愚蠢的问题。现在我会在寻求帮助之前三思而后行。从我提出问题的地方来看，没有多少人可以就这类话题寻求帮助。我相信这个平台的建立是为了帮助开发人员互相帮助而不是劝阻他们。

【参考方案1】：

过时/弃用

使用<Query /> 和<Mutation/> 组件是使用过时示例/教程/知识的标志。

这些天你应该使用useLazyQuery钩子。

当然您仍然可以使用<Query/> 组件 甚至更旧的方法（compose [multiple] graphql HOC），只要它们受支持。

使用old docs 或者您可以使用skip 属性手动触发它... 甚至 [更简单] 有条件地渲染 <Query/> 组件。

描述了较新的方法in docs。

坏处

在 React 中，您不能从事件处理程序中渲染组件。您可以使用从组件（fe 来自 mutation）但 never rendered from handler! 派生的方法 [作为道具传递] - 就像您不能从事件处理程序返回任何可见（要呈现）的东西（改为更新状态，有条件地呈现一些东西）。 .. 都是数据驱动，update data > render will update a view。

---

更新

组件仅在渲染上下文/流中工作 - 事件处理程序流是独立的，您不能使用（因为不渲染它）或返回要渲染的组件（渲染已提前完成） - 这样您就不能使用它功能 - 在这种情况下查询。

[选项之一] 您必须在渲染流程中渲染<Query /> 组件并使用skip 属性来阻止它在启动时自动触发。处理程序可以更改阻塞（skip）条件（使用setState），它将被触发并重新呈现data 结果。这样你就有了查询事件驱动。

【讨论】：

感谢您的提示，我会将查询和变异更新到最新版本。其实我没有完全理解你所说的渲染位。您能否进一步说明我在此情况下可以做些什么？

感谢您的建议，我使用useLazyQuery查询数据onClick。我已经通过另一条路线解决了这个问题。我彻底重组了我的项目。