Это моя первая попытка React.Я пытаюсь создать пользовательский интерфейс, где я могу перетаскивать изображения и перемещать их порядок.Я понимаю, что сначала для этого потребуется, чтобы у каждого изображения был уникальный ключ, но я не могу найти правильный способ сделать это.Я не понимаю, почему, хотя я явно назначаю ключ, он все еще нулевой, когда я смотрю объект на консоли.Я попытался:
<div>
{this.props.imageArray.map((image, index) => (
<span
key={index}
>
{image}
</span>
))}
</div>;
, который все еще дает мне ключ null (я также попытался назначить внешнему div его собственный ключ, но это тоже не сработало).
Я читал, что если ключ не указан, по умолчанию используется идентификатор элемента в массиве (я все еще получаю нулевое значение, когда ключ не указан, но это ожидалось), поэтому япопытался назначить его вручную
<div>
{this.props.imageArray.map(image => (
<span key={this.props.images.length}>{image}</span>
))}
</div>;
Но это дало мне эту ошибку:
Предупреждение. Обнаружено два ребенка с одним и тем же ключом, 2.Ключи должны быть уникальными, чтобы компоненты сохраняли свою идентичность при каждом обновлении ...
Эта ошибка продолжается с каждым новым изображением, добавляемым в массив, даже если # увеличивается с каждой ошибкой.Это говорит мне о том, что ключ увеличивается, как и должен, но по какой-то причине он все еще не уникален.Я предполагаю, что как-то 2 детей создаются каждый раз?Несмотря на это, это дает мне неправильный вывод, поэтому я не могу его использовать.
Я также просто попробовал это, что дает мне правильный вывод, но я получаю то же предупреждение, что и выше, за исключением #, где написано [object Object]
<div>
{this.props.imageArray.map(image => (
<span key={image}>{image}</span>
))}
</div>;
Вот мой полный код для компонента.Когда я проверяю идентификатор объекта в событии перетаскивания при перемещении изображений, он всегда не определен.Мне просто нужно выяснить, что происходит с этой уникальной ключевой проблемой, но если вы видите что-то не так с функциональностью перетаскивания, я мог бы использовать некоторые указатели и их.
class Images extends Component {
state = {
arrayOfImages: [...this.props.imageArray],
droppedImage: []
};
onDragStart = (ev, id) => {
ev.dataTransfer.setData("id", id);
};
onDrop = ev => {
let id = ev.dataTransfer.getData("id");
let draggedImage = this.state.arrayOfImages.filter(function(image) {
return image === id;
});
this.setState({
droppedImage: draggedImage
});
};
onDragOver = ev => {
ev.preventDefault();
};
render() {
return (
<React.Fragment>
<div>
{this.props.imageArray.map((image, index) => (
<span
key={index}
onDragStart={this.onDragStart}
draggable //I know this isn't necessary for images
>
{image}
</span>
))}
</div>
<div
className="dropTarget"
onDragOver={e => this.onDragOver(e)}
onDrop={e => this.onDrop(e)}
>
{this.state.droppedImage}
</div>
</React.Fragment>
);
}
}
export default Images;