javascript - React unique key prop - Stack Overflow

admin管理员组

文章数量:1291620

I know there are many answers out there for this issue but I couldn't find one that exactly solved my problem. I am getting the following error : Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of QuestionItem. See for more information.

I am setting a key for the ponent but I can't get the warning to go away.

Main ponent :

renderData() {
        return this.state.data.map((data) => {
            return (
                <QuestionItem key={data._id} data={data} delete={this.deleteItem} edit={this.editItem} />
            )
        })
    }

QuestionItem ponent :

import React, { Component, PropTypes } from 'react';
import Card from 'material-ui/lib/card/card';
import CardActions from 'material-ui/lib/card/card-actions';
import CardHeader from 'material-ui/lib/card/card-header';
import CardMedia from 'material-ui/lib/card/card-media';
import CardTitle from 'material-ui/lib/card/card-title';
import FlatButton from 'material-ui/lib/flat-button';
import CardText from 'material-ui/lib/card/card-text';
import Delete from 'material-ui/lib/svg-icons/action/delete';
import ModeEdit from 'material-ui/lib/svg-icons/editor/mode-edit';
import IconButton from 'material-ui/lib/icon-button';
import Button from '../UI/Button';

class QuestionItem extends Component {

    renderTags() {
        return this.props.data.tag.map((tag) => {
            return (
                <FlatButton label={tag} />
            )
        })
    }

    renderCompany() {
        return this.props.datapany.map((pany) => {
            return (
                <FlatButton label={pany} />
            )
        })
    }

    edit = () => {
        this.props.edit(this.props.data);
    }

    delete = () => {
        this.props.delete(this.props.data._id);
        console.log(this.props.data._id);
    }

    render() {
        return (
            <Card style={{margin: 50}}>
                <CardTitle title={this.props.data.text} />
                <CardText>
                    {this.props.data.answer}
                </CardText>
                <CardActions>
                    { this.renderTags() }
                    { this.renderCompany() }

                    <IconButton onClick={this.delete} style={{float: 'right'}}>
                        <Delete />
                    </IconButton>
                    <IconButton onClick={this.edit} style={{float: 'right'}}>
                        <ModeEdit />
                    </IconButton>
                </CardActions>
            </Card>
        )
    }
}

export default QuestionItem;

What am I missing here?

I know there are many answers out there for this issue but I couldn't find one that exactly solved my problem. I am getting the following error : Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of QuestionItem. See https://fb.me/react-warning-keys for more information.

I am setting a key for the ponent but I can't get the warning to go away.

Main ponent :

renderData() {
        return this.state.data.map((data) => {
            return (
                <QuestionItem key={data._id} data={data} delete={this.deleteItem} edit={this.editItem} />
            )
        })
    }

QuestionItem ponent :

import React, { Component, PropTypes } from 'react';
import Card from 'material-ui/lib/card/card';
import CardActions from 'material-ui/lib/card/card-actions';
import CardHeader from 'material-ui/lib/card/card-header';
import CardMedia from 'material-ui/lib/card/card-media';
import CardTitle from 'material-ui/lib/card/card-title';
import FlatButton from 'material-ui/lib/flat-button';
import CardText from 'material-ui/lib/card/card-text';
import Delete from 'material-ui/lib/svg-icons/action/delete';
import ModeEdit from 'material-ui/lib/svg-icons/editor/mode-edit';
import IconButton from 'material-ui/lib/icon-button';
import Button from '../UI/Button';

class QuestionItem extends Component {

    renderTags() {
        return this.props.data.tag.map((tag) => {
            return (
                <FlatButton label={tag} />
            )
        })
    }

    renderCompany() {
        return this.props.data.pany.map((pany) => {
            return (
                <FlatButton label={pany} />
            )
        })
    }

    edit = () => {
        this.props.edit(this.props.data);
    }

    delete = () => {
        this.props.delete(this.props.data._id);
        console.log(this.props.data._id);
    }

    render() {
        return (
            <Card style={{margin: 50}}>
                <CardTitle title={this.props.data.text} />
                <CardText>
                    {this.props.data.answer}
                </CardText>
                <CardActions>
                    { this.renderTags() }
                    { this.renderCompany() }

                    <IconButton onClick={this.delete} style={{float: 'right'}}>
                        <Delete />
                    </IconButton>
                    <IconButton onClick={this.edit} style={{float: 'right'}}>
                        <ModeEdit />
                    </IconButton>
                </CardActions>
            </Card>
        )
    }
}

export default QuestionItem;

What am I missing here?

• javascript
• reactjs

Share Improve this question Follow asked Mar 3, 2016 at 20:51 erichardson30erichardson30 5,05488 gold badges2929 silver badges4747 bronze badges 1

• I believe you need to eventually render the key into HTML and it doesn't look like you've passed it down into your HTML but just have it on that one item. – Dave Bush Commented Mar 3, 2016 at 20:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Well you'll need to log out the data._id and verify that they are all unique. Or you can do this:

renderData() {
  return this.state.data.map((data, index) => {
    return (
      <QuestionItem key={index} data={data} delete={this.deleteItem} edit-{this.editItem} />
    );
 });
}

As the other answer pointed out, the other calls to map that go to a render need to set the key prop too to a unique value.

So these:

renderTags() {
    return this.props.data.tag.map((tag) => {
        return (
            <FlatButton label={tag} />
        )
    })
}

renderCompany() {
    return this.props.data.pany.map((pany) => {
        return (
            <FlatButton label={pany} />
        )
    })
}

Should bee:

renderTags() {
    return this.props.data.tag.map((tag, index) => {
        return (
            <FlatButton key={index} label={tag} />
        );
    });
}

renderCompany() {
    return this.props.data.pany.map((pany, index) => {
        return (
            <FlatButton key={index} label={pany} />
        );
    });
}

Note we are using index which is the array index. It is basically like a synthetic identifier in SQL. If what you're actually rendering has unique identifiers already, it is better to use those! For example, the key prop for a tag could be just the tag -- the string itself. The key prop supports multiple types:

react - nodes-and-elements:

key : string | boolean | number | null,

So if your tags are unique (I would expect them to be but obviously don't want to assume), you could do this:

renderTags() {
    return this.props.data.tag.map((tag) => {
        return (
            <FlatButton key={tag} label={tag} />
        );
    });
}

You might consider doing instead something like (tag || '').toLowerCase().replace(' ', '_') however I think React is already doing some manipulation there (besides potentially character case). So just passing the tag itself should be good! You can inspect the DOM to see data-reactid if you're not running a version that got rid of it (I think 0.15 gets rid of it). The React developer tools might let you inspect the key with 0.15.

Update

I do not remend using the array index as the key. It causes subtle bugs. To see this in action, make an array of objects, render them using the array index and then mutate the array by removing say the 2nd element (and ensure React renders again). Now the indexes don't correspond to the same objects. My remendation is to always set a key to a unique value. During development, it might be best not to set a key until you find one rather than using the array index because then the errors on the console will remind you to fix this before deploying/mitting your change.

In renderTags() and renderCompany() you have iterators with no keys.

本文标签： javascriptReact unique key propStack Overflow