IT技术 - react独特的关键props - 吾爱随笔录

react独特的关键props

IT技术 javascript reactjs

2021-05-21 16:29:44

我知道这个问题有很多答案，但我找不到一个完全解决我的问题的答案。我收到以下错误：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;

我在这里错过了什么？

2个回答

那么您需要注销data._id并验证它们都是唯一的。或者你可以这样做：

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

正如另一个答案所指出的，对map渲染的其他调用也需要将keyprops设置为唯一值。

所以这些：

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标签的props可能只是标签——字符串本身。该keyprops支持多种类型：

react - 节点和元素：

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 再次渲染）。现在索引不对应于相同的对象。我的建议是始终将键设置为唯一值。在开发过程中，最好在找到键之前不要设置键，而不是使用数组索引，因为这样控制台上的错误会提醒您在部署/提交更改之前修复此问题。

在renderTags()和renderCompany()你有没有钥匙迭代器。

其它你可能感兴趣的问题

上一篇计算器显示的正则表达式下一篇“AsyncThunkAction”类型的 Redux-toolkit 上不存在属性“then”