Javascript 从数据库查询React、Redux表单和GraphQL中select input内的onChange事件

当用户从

selectinput

字段中选择一台机器时，我试图从数据库中进行查询（该数据也来自数据库）。我用的是redux表单。我的代码如下：

机械名称

并且

选择输入

填充机器名称和

值

是对应机器的

id

。现在，当用户选择一台机器时，它的状态将用该机器的

id

值更新

在

handleChange

上，我试图调用一个名为

queryMachineById

的方法，该方法应通过特定的

机器id

获取数据。查询应该从数据库返回该机器的

noOfDispenser

。（顺便说一句，此查询正在GraphQL上运行）

handleChange=（事件，输入）=>{
event.preventDefault（）；
常量{name，value}=event.target；
input.onChange（值）；
this.setState（{[name]：value}）；
设置超时（（）=>{
this.queryMachineById（）；
}, 1000);
};

queryMachineById

方法编写如下：

queryMachineById=（）=>{
const machineId=parseInt（this.state.machine）；
控制台日志（machineId的类型，machineId）；
返回(
{（{数据，加载，错误}）=>{
如果（加载）返回加载…
；
if（error）返回error
；
控制台日志（数据）；
返回data.machineById.map(
machine=>（initialValues.dispenderno=machine.noOfDispensers）
);
}}
);
};

machineId

也正在使用有效的

id

from状态更新。但是

queryMachineById

中的

console.log（data）

没有显示任何内容，甚至没有显示空的

{}

我的

GraphQL查询

如下所示：

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

onClick

也不工作

过时/弃用

• 使用
  和
  组件是使用过时示例/教程/知识的标志

现在你应该使用

useLazyQuery

hook

当然您仍然可以使用

组件或更旧的方法（

组合
[multiple]
graphql
HOCs），只要它们受支持


使用
或者您可以使用
skip
属性手动触发它
甚至[更简单]有条件地呈现
组件

描述了更新的方法

坏蛋
在React中，不能从事件处理程序渲染组件。您可以使用从组件（f.e.from）派生的方法[作为道具传递]，但
从未从处理程序中呈现-就像您不能从事件处理程序返回任何可见的（要呈现的）内容一样（改为更新状态，有条件地呈现某些内容）。。。这都是数据驱动的，
更新数据>渲染将更新视图


更新

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

[其中一个选项]您必须在渲染流中渲染
组件，并使用
skip
属性在开始时阻止其自动触发。处理程序可以更改阻塞（
skip
）条件（使用
setState
），它将被触发并与
数据
结果重新关联。通过这种方式，您可以进行查询事件驱动。
raact basic-无法从事件处理程序进行渲染。。。提示：“点击查询”我以前从未构建过这种类型的应用程序。我尝试添加的功能以前从未实现过。没有人能不问愚蠢的问题和犯愚蠢的错误而成为专家。如果你不喜欢没有适当解释的问题，你就不愿意问愚蠢的问题。现在我在请求帮助之前要三思而后行。在我提出问题的地方，没有那么多人可以就这类话题寻求帮助。我相信这个平台的建立是为了帮助开发者彼此，而不是让他们泄气。谢谢你的提示，我将把我的查询和变异更新到最新版本。事实上，我没有完全理解你所说的渲染位。您能进一步说明我在这里能做些什么吗？谢谢您的建议，我正在使用
useLazyQuery
查询数据
onClick
。我走另一条路解决了这个问题。我完全重组了我的项目。