Блог

Я пытаюсь изменить этот пример https://www.telerik.com/kendo-react-ui/components/sortable/nesting / создав свой собственный, который вставит третий перетаскиваемый компонент в контейнеры с именем цвета, которое является подцветом. В настоящее время моя попытка завершается неудачей, потому что я получаю эту ошибку Cannot read properties of undefined (reading 'map') в этой строке const [subColors, setSubColors] = React.useState()

Почему и как я могу передать данные SecondNestedSortableUI подцветки компоненту, как в этом примере? Вот мой код:

 import * as React from "react";
import { Sortable } from "@progress/kendo-react-sortable";


const SecondNestedSortableUI = (props) => {
  const { style, attributes, dataItem, forwardRef, isActive } = props;
  const [subColors, setSubColors] = React.useState(
    props.dataItem.data.map((item) => ({
      id: item,
      name: item,
    }))
  );

  
  <div
  ref={forwardRef}
  {...attributes}
  style={{
    ...style,
    border: isActive ? "2px dashed black" : 0,
    paddingTop: 1,
    paddingBottom: 1,
    paddingLeft: 2,
    paddingRight: 2,
  }}
>
  <div
    style={{
      backgroundColor: dataItem.color,
      color: "white",
      height: 100,
      border: "1px solid black",
    }}
  >
  {dataItem.name}
  </div>
  
</div>
  
}

const NestedSortableUI = (props) => {
  const { style, attributes, dataItem, forwardRef, isActive } = props;
 

  
  return (
    <div
      ref={forwardRef}
      {...attributes}
      style={{
        ...style,
        border: isActive ? "2px dashed black" : 0,
        paddingTop: 1,
        paddingBottom: 1,
        paddingLeft: 2,
        paddingRight: 2,
      }}
    >
      <div
        style={{
          backgroundColor: dataItem.color,
          color: "white",
          height: 100,
          border: "1px solid black",
        }}
      >
          <Sortable
          data={subColorsA}
        idField={"colorId"}
        itemUI={SecondNestedSortableUI}
        
      />

      </div>
      
    </div>
  );
};

const SortableItemUI = (props) => {
  const [colors, setColors] = React.useState(
    props.dataItem.data.map((item) => ({
      colorId: item,
      color: item,
    }))
  );

  const onDragOver = (event) => {
    setColors(event.newState);
  };

  const onNavigate = (event) => {
    setColors(event.newState);
  };

  const { style, attributes, dataItem, forwardRef } = props;
  return (
    <div
      ref={forwardRef}
      {...attributes}
      style={{
        ...style,
        float: "left",
        display: "inline-block",
        width: 125,
        backgroundColor: "#fffaed",
        margin: 4,
        border: "1px solid black",
      }}
    >
      {dataItem.name}
      <Sortable
        idField={"colorId"}
        data={colors}
        itemUI={NestedSortableUI}
        onDragOver={onDragOver}
        onNavigate={onNavigate}
      />
    </div>
  );
};

const colorsA = ["Violet", "Magenta", "Purple", "SlateBlue"];
const subColorsA = ["Sub1", "Sub2", "Sub3", "Sub4"];


const App = () => {
  const [palettes, setPalettes] = React.useState([
    {
      data: colorsA,
      name: "Palette A",
      id: 1,
    }
  ]);

  const [secondColors, setSecondColors] = React.useState([
    {
      data: subColorsA,
      name: "Subcolors A",
      id: 1
    }
  ])

  const onDragOver = (event) => {
    setPalettes(event.newState);
  };

  const onNavigate = (event) => {
    setPalettes(event.newState);

  };

  return (
    <Sortable
      idField={"id"}
      data={palettes}
      itemUI={SortableItemUI}
      onDragOver={onDragOver}
      onNavigate={onNavigate}
    />
  );
};

export default App