即使在分配了值后，键也是空的

Question

This is my first attempt at React. I'm trying to build a UI where I can drag and drop images and move their order around. I realize that first, this is going to require that each image has a unique key, but I can't find the correct way to do it. I don't understand why, even though I am explicitly assigning a key, it is still null when I view the object on the console. I've tried:

<div>
  {this.props.imageArray.map((image, index) => (
    <span
      key={index}
    >
      {image}
    </span>
  ))}
</div>;

Which still gives me a key of null (I tried assigning the outer div its own key as well, but that didn't work either).

I've read that if key isn't specified, it defaults to the element's id in the array (I'm still getting a null value when key isn't specified but that was expected), so I tried to manually assign it

<div>
  {this.props.imageArray.map(image => (
    <span key={this.props.images.length}>{image}</span>
  ))}
</div>;

But that gave me this error:

Warning: Encountered two children with the same key, 2 . Keys should be unique so that components maintain their identity across updates...

That error continues with each new image added to the array even though the # increases with each error. That is telling me that the key is increasing as it should, but for some reason, it is still not unique. My guess is that somehow 2 children are being created each time? Regardless, this gives me the wrong output so I can't use it.

I've also tried simply this, which gives me the correct output, but I get the same warning as above except in place of # it says [object Object]

<div>
  {this.props.imageArray.map(image => (
    <span key={image}>{image}</span>
  ))}
</div>;

Here is my complete code for the component. When I check the object id in the drag event when moving around images, it is always undefined. I just need to figure out what is going on with this unique key issue, but if you see anything wrong with the drag and drop functionality, I could use some pointers their also.

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;

Answer 1

Here is a working sample that substitutes an array of integers for an array of images. I'll leave the image part to you as that seems incomplete in your example. The core bit of your solution is in the file named "images.js".

https://codesandbox.io/s/013jrvn2pp

There are just a couple of issues with your code:

1. As @Kyle rightly points out, you'll need some identifier for your dropped element. The easiest thing to use is the index as the id property.

 <span key={index} id={index} >

2. The handler for the dragStart event does not match the function signature from the Event API. Which means you'll have to derive the id attribute value from the event object within the handler (which I've done in the solution provided):

 onDragStart = (ev, id) => { ... }; Must be: onDragStart = (ev) => { ... };

3. You were also using the .dataTransfer() method improperly. That setData() API requires a data type as the first argument and the value as the second. The getData() API requires only the data type.

You may find that using the index as the id becomes a bit troublesome if you attempt to manipulate the images by id which is also the array index. For example, removing a dropped image from the state will reindex the array of images. So you might consider using something different for the id attribute.

Hope this helps.

Answer 2

Key is a prop, not an attribute. Props do not show up in the DOM, they get passed into the child components.

The key is a special prop that can be on normal elements in lists. It doesn't propagate into the DOM. Take a look at some of the codepens in this article. https://reactjs.org/docs/lists-and-keys.html .

So

<span
  key={index}
  id={index}
>
  {image}
</span>

Will render as:

<span id=*value_of_index*> *value_of_image* </span>

Inspecting the element will not show any key.