反应独特的关键道具

Question

我知道这个问题有很多答案,但我找不到一个能解决我问题的答案.我收到以下错误: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.

我正在为组件设置一个键,但我无法得到警告消失.

主要成分:

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

QuestionItem组件:

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.company.map((company) => {
            return (
                <FlatButton label={company} />
            )
        })
    }

    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;

我在这里错过了什么？

Answer 1

那么你需要注销data._id并验证它们都是独一无二的.或者你可以这样做:

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

正如另一个答案指出的那样,另一个调用map渲染需要将keyprop 设置为唯一值.

所以这些:

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

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

应该成为:

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

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

注意我们使用的index是数组索引.它基本上就像SQL中的合成标识符.如果您实际渲染的内容已经具有唯一标识符,那么最好使用它们!例如,key标签的prop可以只是标签 - 字符串本身.该key道具支持多种类型:

react - nodes-and-elements:

key : string | boolean | number | null,

因此,如果您的标签是唯一的(我希望它们显然不是这样),您可以这样做:

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

您可能会考虑做一些类似的事情,(tag || '').toLowerCase().replace(' ', '_')但我认为React已经在那里做了一些操作(除了潜在的特征情况).所以只是传递标签本身应该是好的!你可以检查DOM,看看data-reactid你是不是运行了一个摆脱它的版本(我认为0.15摆脱它).React开发人员工具可能允许您使用0.15检查密钥.

更新

我不建议使用数组索引作为键.它会导致细微的错误.要查看此操作,请创建一个对象数组,使用数组索引呈现它们,然后通过删除第二个元素来修改数组(并确保再次呈现React).现在索引不对应于相同的对象.我的建议是始终将键设置为唯一值.在开发期间,最好不要设置密钥,直到找到密钥而不是使用数组索引,因为控制台上的错误会提醒您在部署/提交更改之前修复此问题.