Maria Avanova's questions

对于如此多的代码行，我提前表示歉意！请帮我重组阵列。现在我以这样的对象数组的形式接收数据（有条件地，可能会有更多情况）：

let dataToExpandToCheck= [
{ 
codePlatform: 'Platform 1',
codeInstance: 'Instance 1',
codeScheme: 'Scheme 1',
codeTable: 'Table 1",
columns: []
},
{ 
codePlatform: 'Platform 1',
codeInstance: 'Instance 1',
codeScheme: 'Scheme 1',
codeTable: 'Table 2",
columns: []
},
{ 
codePlatform: 'Platform 1',
codeInstance: 'Instance 1',
codeScheme: 'Scheme 2',
codeTable: 'Table 1",
columns: []
},
{ 
codePlatform: 'Platform 1',
codeInstance: 'Instance 2',
codeScheme: 'Scheme 1',
codeTable: 'Table 1",
columns: []
},
{ 
codePlatform: 'Platform 2',
codeInstance: 'Instance 1',
codeScheme: 'Scheme 1',
codeTable: 'Table 1",
columns: []
},
]

问题的本质是，一个平台（codePlatform）内可以有多个实例（codeInstance），一个实例内可以有多个不同的方案（codeScheme），方案内可以有多个不同的表（codeTable）。在我提供的数据中：有2个平台（1和2）。平台 1 内部有 2 个实例（1 和 2），实例 1 内部有模式 1 和模式 2，模式 1 中有 2 个表。在平台 2 上有一个实例、一个模式和一个表。

为了发送数据，我需要重写这个数组，以便 Platform 对象包含其名称和带有其实例的数组，每个实例的对象必须包含实例的名称和包含所有模式的数组，并且每个模式的对象包含其名称和包含表的数组（因此，表对象包括表的名称和其列的数组）。因此，最终数组应该是这样的（我再说一遍，在工作项目中有更多数据和更多选项）：

let restrArray = [
{
    codePlatform: 'Platform 1',
    instances: [
        {
            codeInstance: 'Instance 1',
            schemes: [
                {
                    codeScheme: 'Scheme1',
                    tables: [
                        {
                            codeTable: 'Table 1',
                            columns: []
                        },
                        {
                            codeTable: 'Table 2',
                            columns: []
                        }
                    ]
                },
                {
                    codeScheme: 'Scheme 2',
                    tables: [
                        {
                            codeTable: 'Table 1',
                            columns: []
                        }
                    ]
                }
            ]
        },
        {
            codeInstance: 'Instance 2',
            schemes: [
                {
                    codeScheme: 'Scheme1',
                    tables: [
                        {
                            codeTable: 'Table 1',
                            columns: []
                        }
                    ]
                }
            ]
        }
    ]
},
{
    codePlatform: 'Platform 2',
    instances: [
        {
            codeInstance: 'Instance 1',
            schemes: [
                {
                    codeScheme: 'Scheme 1',
                    tables: [
                        {
                            codeTable: 'Table 1',
                            columns: []
                        }
                    ]
                }
            ]
        }
    ]
}

]

我写下了算法，但它不能正常工作：在某些情况下它不会向平台对象添加实例，有时它会复制数组中的表。请帮助我理解如何重写算法：

    const restructureFinalDataToSend  = (
        dataToExpandToCheck,
        setRestructuredDataToSend
    ) => {
        let newDataArray = [];
        let instanceArray = [];
        let instanceObject = {};
        let schemesArray = [];
        let schemeObject = {};
        let tablesArray = [];
        let tableObject = {};
        let platformObject = {};
    for (let i = 0; i < dataToExpandToCheck.length; i++) {
        for (let j = 0; j < i; j++) {
            if (
                dataToExpandToCheck[j].codePlatform ===
                dataToExpandToCheck[i].codePlatform
            ) {
                if (
                    dataToExpandToCheck[j].codeInstance ===
                    dataToExpandToCheck[i].codeInstance
                ) {
                    if (
                        dataToExpandToCheck[j].codeScheme ===
                        dataToExpandToCheck[i].codeScheme
                    ) {
                        tableObject = {
                            codeTable: dataToExpandToCheck[i].codeTable,
                            columns: dataToExpandToCheck[i].columns
                        };
                        tablesArray.push(tableObject);
                        schemeObject = {
                            codeScheme: dataToExpandToCheck[i].codeScheme,
                            tables: tablesArray
                        };
                        schemesArray.push(schemeObject);
                        instanceObject = {
                            codeInstance: dataToExpandToCheck[i].codeInstance,
                            schemes: schemesArray.reduce((o, i) => {
                                if (
                                    !o.find((v) => v.codeScheme == i.codeScheme)
                                ) {
                                    o.push(i);
                                }
                                return o;
                            }, [])
                        };
                        instanceArray.push(instanceObject);
                        platformObject = {
                            codePlatform: dataToExpandToCheck[i].codePlatform,
                            instances: instanceArray.reduce((o, i) => {
                                if (
                                    !o.find(
                                        (v) => v.codeInstance == i.codeInstance
                                    )
                                ) {
                                    o.push(i);
                                }
                                return o;
                            }, [])
                        };
                        newDataArray.push(platformObject);
                    } else {
                        schemeObject = {
                            codeScheme: dataToExpandToCheck[i].codeScheme,
                            tables: [
                                {
                                    codeTable: dataToExpandToCheck[i].codeTable,
                                    columns: dataToExpandToCheck[i].columns
                                }
                            ]
                        };
                        schemesArray.push(schemeObject);
                        instanceObject = {
                            codeInstance: dataToExpandToCheck[i].codeInstance,
                            schemes: schemesArray
                        };
                        instanceArray.push(instanceObject);
                        platformObject = {
                            codePlatform: dataToExpandToCheck[i].codePlatform,
                            instances: instanceArray
                        };
                        newDataArray.push(platformObject);
                    }
                } else {
                    instanceObject = {
                        codeInstance: dataToExpandToCheck[i].codeInstance,
                        schemes: [
                            {
                                codeScheme: dataToExpandToCheck[i].codeScheme,
                                tables: [
                                    {
                                        codeTable:
                                            dataToExpandToCheck[i].codeTable,
                                        columns: dataToExpandToCheck[i].columns
                                    }
                                ]
                            }
                        ]
                    };
                    instanceArray.push(instanceObject);
                    platformObject = {
                        codePlatform: dataToExpandToCheck[i].codePlatform,
                        instances: instanceArray
                    };
                    newDataArray.push(platformObject);
                }
            } else {
                platformObject = {
                    codePlatform: dataToExpandToCheck[i].codePlatform,
                    instances: [
                        {
                            codeInstance: dataToExpandToCheck[i].codeInstance,
                            schemes: [
                                {
                                    codeScheme:
                                        dataToExpandToCheck[i].codeScheme,
                                    tables: [
                                        {
                                            codeTable:
                                                dataToExpandToCheck[i]
                                                    .codeTable,
                                            columns:
                                                dataToExpandToCheck[i].columns
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                };
                newDataArray.push(platformObject);
            }
        }
    }
    let resultArray = newDataArray.reduce((o, i) => {
        if (!o.find((v) => v.codePlatform == i.codePlatform)) {
            o.push(i);
        }
        return o;
    }, []);
    setRestructuredDataToSend(resultArray);
};

大家好！我正在尝试在项目中实现一个简单的搜索功能。项目 - 属性列表。我有一个包含这些元素的数组：

const selectedAttributesArray = [
{
attrType: "ЭЛЕМЕНТ",
code: "Teen",
id: 162,
links: [],
note: "string",
type: "protegrity",
},
{
attrType: "ЭЛЕМЕНТ",
code: "DE_unicode1",
id: 141,
links: [ 
{idElementConnect: 162, 
protectionFunc: 'DE1_string', 
unprotectionFunc: 'DE2_string', 
codeElementConnect: 'IK_HIVE'
},
],
note: "string",
type: "protegrity",
},
{
attrType: "ЭЛЕМЕНТ",
code: "R1_to_de",
id: 81,
links: [ 
{idElementConnect: 182, 
protectionFunc: 'ptyProtectStr', 
unprotectionFunc: 'ptyUnprotectStr', 
codeElementConnect: 'HIVE'}, 
{idElementConnect: null, 
protectionFunc: 'FUNCTION_FOR', 
unprotectionFunc: null, 
codeElementConnect: null}, 
{idElementConnect: 201, 
protectionFunc: 'ptyProtectStr', 
unprotectionFunc: 'ptyUnprotectStr', 
codeElementConnect: 'SPARK'},
],
note: "string1",
type: "protegrity",
}
]

要查找数组元素，需要有一个具有单独 searchValue 状态的输入（该状态位于父组件中）：

export const SearchWidget = ({ searchValue, handleSearchQuery }) => {
    
  return (
    <div className={styles.mainContainer}>
        <Input
        placeholder='Найти атрибут...'
        value={searchValue}
        onChange={(e: string) => handleSearchQuery(e)} 
        />
    </div>
  )
}

最后，使用该函数过滤数组，以便可以在渲染期间映射其中的数据：

    export const DataResultCards = ({ selectedAttributesArray, searchValue, handleOpenSideBar }) => {
  
  const filteredAttributeList = selectedAttributesArray?.filter(attribute =>
    new RegExp(`${searchValue.toLowerCase().replace(/%/g, '.')}`).test(attribute.code.toLowerCase()),
  );

  return (
    <>
      {filteredAttributeList.length > 0 ? (
        filteredAttributeList?.map(attribute => {
          return <DataResultCard attribute={attribute} />;
        })
      ) : (
        <div>Ничего не найдено</div>
      )}
    </>
  );
};

应该如何进行搜索 例如：

1. 当我在搜索中输入“ de ”时，我得到两个对象：属性卡“ DE unicode1”和“R1_to de ”（通过属性名称找到）
2. 如果我在搜索中输入“ hiv ”，我将在屏幕上看到卡片“DE_unicode1”（它有 codeElementConnect: 'IK_HIVE '）和“R1_to_de”（它有 codeElementConnect: ' HIVE '）。
3. 当您输入“ Str ”时，结果是相同的，因为它们具有protectionFunc：'DE1_string '和protectionFunc：'ptyProtect Str '。

个人属性卡代码：

export const DataResultCard = ({ attribute, handleOpenSideBar }) => {
  return (
    <Card
      style={{ width: 804, minHeight: 180, marginBottom: '5px' }}
    >
<Tag classes={{ tag: styles.typeTag }}>{attribute.attrType}</Tag>
        {attribute.links.length > 0
          ? attribute.links?.map(link => {
              if (link.codeElementConnect === null) {
                return null;
              } else {
                return (
                  <div onClick={() => handleOpenSideBar(link)}>
                    <Tag classes={{ tag: styles.connectedAttrTag }}>{link.codeElementConnect}</Tag>
                  </div>
                );
              }
            })
          : null}
<Text kind="h4b">{attribute.code}</Text>
<Text kind="textSb">Функции шифрования: </Text>
              {attribute.links?.map(link => {
                return (
                  <ul>
                    <li>
                      <ListEncryptionFunction link={link} attribute={attribute} />
                    </li>
                  </ul>
                );
              })}
</Card>
  );
};

我尝试重写过滤器，以便属性中的链接数组也可以用于通过链接名称查找元素：

 const filteredAttributeList = selectedAttributesArray?.filter((attribute) => {
        attribute.links?.map((link) => {
          if (link.codeElementConnect !== null) {
            new RegExp(`${searchValue.toLowerCase().replace(/%/g, '.')}`).test(link.codeElementConnect.toLowerCase()),
          } else {
            new RegExp(`${searchValue.toLowerCase().replace(/%/g, '.')}`).test(attribute.code.toLowerCase()),
          }
        } 
          )
      }
    );

但搜索并非如此。如何设置具有多个条件的过滤器以通过链接名称查找元素？

我的项目使用react-draggable库，表格形式的数据（相同的可拖动元素）在屏幕上移动，并且可以记录它们的移动。是否可以使用此库选择多个元素并一次在屏幕上移动选定的元素？这就是代码的一部分：

           <Draggable
                onDrag={onDrag}
                onStop={onChangePositionHandler}
                nodeRef={nodeRef}
                position={{ x: table.position.x, y: table.position.y }}
                zIndex="8"
            >
                <div
                    className={styles.MainContainer}
                    id={table.name}
                >
                {table.name}
               </div>
            </Draggable>

这是一个在移动对象时触发的函数，允许您保存新的坐标。

const onChangePositionHandler = (event, dragElement) => {
        onStop();
        const changedTable = {
            id: table.id,
            name: table.name,
            isCreatedByUser: table.isCreatedByUser,
            isAssociator: table.isAssociator,
            color: tableColor,
            position: {
                x: dragElement.x,
                y: dragElement.y
            },
            columns: table.columns
        };

        onChangeTableHandler(changedTable, areaName);
    };

有一个想法是收集一组 Draggable 对象，然后移动整个数组。我只是不知道如何计算每个坐标的新坐标并分配它们。有人遇到过类似的问题吗？该项目还有react-zoom-pan-pinch 库，但它的包装器用于移动图中的所有表。你只需要移动你最喜欢的。如何附加这样的功能？

我正在可视化两个表的数据：

const json ={
  "tables": [
    {
      "tableName": "One",
      "coordinates": {
        "x": "100",
        "y": "100"
      },
      "columns": [
        {"name": "smthLike",
            "type": "string",
            "typeFormat": "",
            "example": "",
            "descriptor": ""},
        {"name": "@MainColumn",
            "type": "integer",
            "typeFormat": "int64",
            "example": "",
            "descriptor": "codePlatform"}
      ]
    },
    {
      "tableName": "Two",
      "coordinates": {
        "x": "200",
        "y": "200"
      },
      "columns": [
        {"name": "codePlatform",
            "type": "string",
            "typeFormat": "",
            "example": "",
            "descriptor": ""},
        {"name": "namePlatform",
            "type": "string",
            "typeFormat": "",
            "example": "",
            "descriptor": ""}
      ]
    }
  ]
}
введите сюда код

在我的工作中，我使用 react-xarrows 库代码，示例 4：https ://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark

表具有名称描述符键。如果描述符与名称匹配（在本例中为 codePlatform），则数据链接箭头应从具有 codePlatform 的字段延伸到描述符为 (@MainColumn) 的字段。

我试图开出这样的条件，但到目前为止它不起作用。要画一个箭头，你需要给它一个起点和一个终点。告诉我，如何在 Column 字段组件中编写这样的条件？

import React from "react";
import styles from "./Column.module.css";
import Xarrow, { useXarrow, Xwrapper } from "react-xarrows";

export const Column = ({ column, index }) => {
  const { name, descriptor } = column;

  const line = {
    from: "",
    to: "",
  };

  return (
    <>
      <div className={styles.ColumnContainer}>
        {name}: {descriptor}
      </div>
    </>
  );
};

表格组件代码：

import Draggable from 'react-draggable';
import React from 'react';
import Xarrow, { useXarrow, Xwrapper } from 'react-xarrows';
import { Column } from '../Column/Column';

export const DraggableBox = ({table, key, reference = undefined, id = undefined, ...style }) => {
  const {tableName, coordinates} = table;
  
  const updateXarrow = useXarrow();
  
  //if (initialOffset) moreStyle = { position: 'absolute', left: initialOffset.x, top: initialOffset.y };
  return (
    <Draggable onDrag={updateXarrow} onStop={updateXarrow}>
      <div ref={reference} id={id} style={{position: 'absolute', left: coordinates.x + 'px', top: coordinates.y + 'px', border: '2px solid'}}>
      <p>Название: {tableName}</p>
      <div>
        {table.columns.map((column, index) => (
          <Column table={table} column={column} key={index} />
        ))}
      </div>
      </div>
      
    </Draggable>
  );
};
введите сюда код

和一个我迭代整个数据数组的组件：

import { Table } from "../Table/Table";
import styles from "./Tables.module.css";
import tableData from "../utils/all_db_schema.json";

export const Tables = () => {
  const [tableState, setTableState] = useState(tableData);

  return (
    <>
      {tableState.map((elem, index) => (
        <div
          className={styles.AreaContainer}
          key={index}
          style={{ color: elem.color }}
        >
          <p>Имя: {elem.groupName}</p>
          <div className={styles.ClassesContainer}>
            {elem.tables.map((table, index) => (
              DraggableBox table={table} key={index} />
            ))}
          </div>
        </div>
      ))}
    </>
  );
};

我正在用两个表渲染 json，每个表都有 x y 坐标。我需要根据这些坐标来绘制这些表格。

"tables": [
{ "tableName": "One",
"coordinates": {
"x": "100",
"y": "100"
},
"columns": [{},{}]
},
{"tableName": "Two",
"coordinates": {
"x": "200",
"y": "200"
},
"columns": [{},{}]
}]

使用 map 方法遍历表后，我将数据“打包”到 . 我正在尝试将 style={{}} 分配给具有这些坐标的容器，但它们是相互叠加的。

    export const Table = ({table}) => {
const {tableName, coordinates} = table;
return (
<div style={{position: "absolute", left: coordinates.x, top: coordinates.y}}>
<p>{tableName}</p>
<div>{table.columns.map((el) => (
<div>{columnName}</div>))}
</div>
</div>
);
};

在我的情况下如何安排表格的正确坐标？