Javascript 使用next.js中的react-awesome查询生成器npm包无法添加多个字段，如演示所示

我正在尝试使用提供的文档制作与演示相同的查询生成器。。。在配置中添加更多字段后，我在下拉列表中获得了新选项。。为了创建更多的字段，我们使用了多个构建器组件，甚至为每个组件尝试了不同的配置文件。。但它们都是同时变化的。如何创建更多字段并为其设置处理程序

链接到软件包 链接到演示

我做错了什么。。。如何添加更多的节。。这是我的配置文件组件

import React，{Component}来自'React'；
从“查询生成器”导入{Query，Builder，BasicConfig，Utils as QbUtils}；
//从“查询生成器/lib/config/antd/index”导入AntdConfig；
//从“/init_value”导入loadedInitValue；
const InitialConfig=BasicConfig；//或基本配置
//您需要提供自己的配置。请参阅下面的“配置格式”
让配置={
…初始化配置，
字段：{
数量：{
标签：“数量”，
键入：“编号”，
字段设置：{
分:0,，
},
valueSources:['value']，
preferWidgets:['number']，
},
价格：{
标签：“价格”，
键入：“编号”，
valueSources:['value']，
字段设置：{
民:10,，
最高：100，
},
preferWidgets:['slider'，'RangeSloider']，
},
颜色：{
标签：“颜色”，
键入：“选择”，
valueSources:['value']，
字段设置：{
列表值：[
{值：'yellow'，标题：'yellow'}，
{值：'绿色'，标题：'绿色'}，
{值：'orange'，标题：'orange'}
],
}
},
推广活动：{
标签：“促销品”，
类型：'布尔'，
运算符：[“相等”]，
valueSources:['value']，
},
}
},
};
const queryValue={“id”：QbUtils.uuid（），“type”：“group”}；
类QueryBuilder扩展组件{
状态={
树：QbUtils.checkTree（QbUtils.loadTree（queryValue），config），
config:config
};
渲染=（）=>(
{this.renderResult（this.state）}
)  
renderBuilder=（道具）=>(
)
renderResult=（{tree:immutableTree，config}）=>(
查询字符串：{JSON.stringify（QbUtils.queryString（immutableTree，config））}
MongoDb查询：{JSON.stringify（QbUtils.mongodbFormat（immutableTree，config））}
)
onChange=（不可变树、配置、idx）=>{
//提示：要获得更好的性能，您可以应用“油门”-请参阅“示例/演示”`
this.setState（{tree:immutableTree，config:config}）；
constjsontree=QbUtils.getTree（不可变树）；
console.log（jsonTree）；
//`jsonTree`可以保存到后端，然后加载到`queryValue'`
}
}
导出默认QueryBuilder将其添加到字段配置中

将其添加到字段配置中

在你的问题中，代码太多，毫无意义。指出错误，以及你落后的地方。我正在尝试更多的章节。。但我认为一次点击并不能解决所有问题。。我在3个部分中使用了3个构建器组件，但当1是更改时，它们都会更改。在您的问题中，这会导致代码过多而毫无意义。指出错误，以及你落后的地方。我正在尝试更多的章节。。但我认为一次点击并不能解决所有问题。。我在3个部分中使用了3个构建器组件，但当1更改时，它们都会更改
 results: {
            label: "Results",
            type: "!group",
            subfields: {
                product: {
                    type: "select",
                    fieldSettings: {
                        listValues: ["abc", "def", "xyz"],
                    },
                    valueSources: ["value"],
                },
                score: {
                    type: "number",
                    fieldSettings: {
                        min: 0,
                        max: 100,
                    },
                    valueSources: ["value"],
                }
            }
        },