我正在制作我的第一个应用程序。作为一个初学者,我很可能会因为我的代码而被谋杀,但这是事实。
我试着制作一个视频来展示这种奇怪的行为。似乎只有当子组件映射一个值数组以呈现所需的输出时才会发生这种情况
https://youtu.be/ysFdCiWr51E
在代码方面
子组件由两层组成:
import React, { useState, useEffect } from 'react';
import { ReactComponent as FilterIcon } from '../icons/filter.svg';
import FilterColumnSelector from './filterSelector.js';
export default function FilterDropZone({
filters,
removeFilter,
handleDraggedItem,
namespace,
handleAddFilter
}) {
const handleDragOver = (event) => {
event.preventDefault();
event.stopPropagation();
};
useEffect(() => {
console.log(filters);
}, [filters]);
const handleDrop = (event) => {
event.preventDefault();
event.stopPropagation();
var columnName = event.dataTransfer.getData('text');
console.log(columnName);
if (columnName) {
handleAddFilter(columnName);
event.dataTransfer.clearData();
}
};
return (
<div className="filterDropZone">
<div className="filterIconWrapper">
<FilterIcon className="filterIcon" />
</div>
<div
className="filterDropZoneInnerDiv"
onDragOver={(e) => handleDragOver(e)}
onDrop={(e) => handleDrop(e)}
>
<ul>
{filters.map((filterItem, index, column, type, choices, selectedValues) => (
<FilterColumnSelector
key={index}
index={index}
column={column}
namespace={namespace}
type={type}
choices={choices}
selectedValues={selectedValues}
handleDraggedItem={handleDraggedItem}
{...filterItem}
/>
))}
</ul>
</div>
</div>
);
}
下层子层:
import React, { useState, useEffect } from 'react';
export default function FilterColumnSelector({
selectedColumn,
handleDraggedItem,
namespace,
index,
column,
type,
choices,
selectedValues,
//handleDraggedItem,
...rest
}) {
const handleDragStart = (event, column) => {
event.dataTransfer.setData('text', selectedColumn);
// handleDraggedItem(event.target.id);
};
return (
<>
<li key={index} className="draggableColumnList">
<div
id={namespace.concat(column)}
className="draggableColumn"
draggable="true"
onDragStart={(event) => handleDragStart(event, column)}
>
{column}
</div>
</li>
</>
);
}
父组件:
//JavaScript源代码
import React, { useState, useEffect } from 'react';
import './dataExplorer.css';
import AxisDropZone from './axisDraggableArea.js';
import FilterDropZone from './filter/filterDropZone.js';
import DraggableColumnList from './ColumnList/draggableColumnList.js';
import SearchBar from './search/search.js';
import ColourDropZone from './colour/colourDropZone.js';
import SizeDropZone from './size/size.js';
const removeItemFromArray = (item, array) => {
var index = array.indexOf(item);
if (index !== -1) {
array.splice(index, 1);
}
return array;
};
const uniqueValues = (data, column) => {
var unique = [];
var distinct = [];
for (let i = 0; i < data.length; i++) {
if (!unique[data[i][column]]) {
distinct.push(data[i][column]);
unique[data[i][column]] = 1;
}
}
return distinct;
};
export default function DataExplorer({ data, filename }) {
const [columns, setColumns] = useState([]);
const [childToRemove, setChildToRemove] = useState();
const [draggedItem, setDraggedItem] = useState();
const [xaxisColumn, setXaxisColumn] = useState();
const [yaxisColumn, setYaxisColumn] = useState();
const [xaxisModification, setXaxisModification] = useState('');
const [yaxisModification, setYaxisModification] = useState('');
const [searchTerm, setSearchTerm] = useState();
const [colourColumn, setColourColumn] = useState();
const [sizeColumn, setSizeColumn] = useState();
const [filters, setFilters] = useState([]);
useEffect(() => {
if (data) {
if (data.length > 0) {
setColumns(Object.keys(data[0]));
}
}
}, [data]);
const handleDraggedItem = (childId) => {
setDraggedItem(childId);
};
const handleXaxisColumn = (newColumn) => {
setXaxisColumn(newColumn);
};
const handleYaxisColumn = (newColumn) => {
setYaxisColumn(newColumn);
};
const handleColourColumn = (newColumn) => {
setColourColumn(newColumn);
};
const handleSizeColumn = (newColumn) => {
setSizeColumn(newColumn);
};
const handleYaxisModification = (newModification) => {
if (newModification === 'None') {
setYaxisModification();
} else {
setYaxisModification(newModification);
}
};
const handleXaxisModification = (newModification) => {
setXaxisModification(newModification);
};
const handleSearchChange = (newTerm) => {
setSearchTerm(newTerm);
};
const handleRemoveFilter = (columnToRemove) => {
if (columnToRemove) {
}
};
const handleAddFilter = (columnName) => {
let newFilters = filters;
let newFilter = {
column: columnName,
type: '',
choices: ['A', 'B'],
selectedValues: ['A', 'B']
};
if (
!newFilters.some(function (o) {
return o['column'] === columnName;
})
) {
newFilters.push(newFilter);
setFilters(newFilters);
console.log(filters);
}
};
return (
<div className="data-explorer-container">
<div className="Data">
<div className="navigation-container">
<div className="Navigation"></div>
<div className="Search-Filter">
<SearchBar onChange={handleSearchChange} />
</div>
<div className="Draggable-Columns">
<DraggableColumnList
columns={columns}
handleDraggedItem={handleDraggedItem}
searchTerm={searchTerm}
/>
</div>
<div className="Colours">
<ColourDropZone
draggedItem={draggedItem}
handleColourColumn={handleColourColumn}
selectedColumn={colourColumn}
handleDraggedItem={handleDraggedItem}
namespace="colour"
/>
</div>
<div className="Size">
<SizeDropZone
draggedItem={draggedItem}
handleSizeColumn={handleSizeColumn}
selectedColumn={sizeColumn}
handleDraggedItem={handleDraggedItem}
namespace="size"
/>
</div>
<div className="Shapes"></div>
</div>
</div>
<div className="Graph-Area">
<div className="Axis-graph-wrapper">
<div className="Axis-areas">
<div className="axis-filter-wrapper">
<div className="FilterZone">
<FilterDropZone
filters={filters}
handleAddFilter={handleAddFilter}
removeFilter={handleRemoveFilter}
handleDraggedItem={handleDraggedItem}
namespace="filter"
/>
</div>
<div className="AxisZone">
<div className="axis-wrapper">
<div className="XaxisZone">
<AxisDropZone
handleDraggedItem={handleDraggedItem}
draggedItem={draggedItem}
selectedColumn={xaxisColumn}
handleColumn={handleXaxisColumn}
modifications={false}
namespace="xaxis"
handleModification={handleXaxisModification}
axisModification={xaxisModification}
axisLabel="x-axis"
/>
</div>
<div className="YaxisZone">
<AxisDropZone
handleDraggedItem={handleDraggedItem}
draggedItem={draggedItem}
selectedColumn={yaxisColumn}
handleColumn={handleYaxisColumn}
modifications={true}
namespace="yaxis"
handleModification={handleYaxisModification}
axisModification={yaxisModification}
axisLabel="y-axis"
/>
</div>
</div>
</div>
</div>
</div>
<div className="Graphing-area">
<div className="graph-container">
<div className="Yaxis-Label"></div>
<div className="Graph-Title"></div>
<div className="Xaxis-Label"></div>
<div className="Graph"></div>
</div>
</div>
</div>
</div>
</div>
);
}