时间戳

首页 > 解决方案 > 在 React、Redux-Form 和 GraphQL 中选择输入中的 onChange 事件从数据库中查询

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

问题描述

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 namevalue是id对应Machine 的。现在，当用户选择一台机器时，它的状态将使用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>
    );
  };

machineIdid也正在使用来自状态的有效更新。但是console.log(data)里面queryMachineById没有显示任何东西，甚至没有空{}

我的GraphQL query样子是这样的：

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

onClick也不工作。

标签： javascriptreactjsgraphqlredux-formreact-apollo

解决方案

过时/弃用

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

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

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

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

文档中描述了较新的方法。

坏人

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

更新

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

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

推荐阅读