React唯一的關鍵支柱

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太設置key道具的唯一值。

所以這些：

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

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

應該變成：我們使用index這是數組索引

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} /> 
     ); 
    }); 
} 

注意。它基本上就像SQL中的綜合標識符。如果你實際渲染的內容已經有了唯一標識符，最好使用這些標識符！例如，標籤的key支柱可能只是標籤 - 字符串本身。該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(' ', '_')但我認爲反應已經在做一些操作存在（除了可能的字符大小寫）。所以傳遞標籤本身應該是好的！如果你沒有運行一個版本，你可以檢查DOM看data-reactid（我認爲0.15擺脫它）。 React開發者工具可以讓你用0.15來檢查密鑰。

更新

我不推薦使用數組索引的關鍵。它會導致微妙的錯誤。爲了看到這一點，創建一個對象數組，使用數組索引來渲染它們，然後通過移除第二個元素（並確保React再次渲染）來改變數組。現在索引不對應於相同的對象。我的建議是始終把鑰匙設定爲獨特的價值。在開發過程中，最好不要設置密鑰直到找到一個密鑰，而不是使用數組索引，因爲那麼控制檯上的錯誤會提醒您在部署/提交更改之前解決此問題。

Answer 2

在renderTags()和renderCompany()你有沒有鍵的迭代器。