Reactjs

Question

我知道警告是什么意思，但如何实际制作动态键值？

我尝试了各种方法，但 none 奏效了。也许我可以在 mongoose schema 中的每个 object 中做一个 key 值，但这是一种不好的做法吗？我的意思是在现实世界的应用程序中，它们是做什么的？

my component render

  render(){
        const myNotes = this.state.Data;
        const listItems = myNotes.map((dynamicData)=>{
      return(
        <Fragment>
          <h3 className='col-12 title' key="12">{dynamicData._id}</h3>
            <div className=' col-6' key="13">
              <ul className ='list-unstyled ' key="1">
              <li className='items' key="2">items</li>
                <li key="3">{dynamicData.firstItem}</li>
                <li key="4">{dynamicData.secondItem}</li>
                <li key="5">{dynamicData.thirdItem}</li>
                {/* <li>Total Budget :</li> */}
              </ul>
            </div>

            <div className='dynamicData col-6' key="6">
              <ul className ='list-unstyled' key="7">
                <li className='prices' key="16">Prices</li>
                <li key="8">{dynamicData.firstPrice} {dynamicData.currency}</li>
                <li key="9">{dynamicData.secondPrice} {dynamicData.currency}</li>
                <li key="10">{dynamicData.thirdPrice} {dynamicData.currency}</li>
              </ul>
            </div>
            <h3 className='col-12 totalprice' key="11">{dynamicData.tBudget} EGP</h3>
        </Fragment>
        )
    })

      return (
         <div className=' col-6 myNotesList ' key="14">
            <div className='row inNotesList' key="16">
          {listItems}
         </div>
         </div>
        )
    }

Mongoose Schema

var listSchema = new mongoose.Schema({
  currency:{
    type: String,
    required: true,
    minlength:3,
    default: "EGP"
  },
  _creator: {
    type: mongoose.Schema.Types.ObjectId,
    required: true
  },
  _id: {
    type: String,
    required: true,
    minlength: 1,
    trim: true
  },
  firstItem: {
    type: String,
    required: true,
    minlength: 1,
    trim: true
  },
  firstPrice:{
    type: Number,
    required: true,
    minlength: 1,
    default: null
  },
  secondItem: {
    type: String,
    required: true,
    minlength: 1,
    trim: true
  },
  secondPrice:{
    type: Number,
    required: true,
    minlength: 1,
    default: null
  },
  thirdItem: {
    type: String,
    required: true,
    minlength: 1,
    trim: true
  },
  thirdPrice:{
    type: Number,
    required: true,
    minlength: 1,
    default: null
  },
  tBudget:{
    type: Number,
    required: true,
    minlength: 1,
    default: null
  }
});

Answer 1

只需使用以下代码：

myNotes.map((dynamicData)=>{return <Component key={dynamicData._id} />;})

Answer 2

npm install uuid

uuid 将生成一个唯一键，现在无论您在何处创建一个笔记对象，都会为每个笔记添加一个 id 并调用 uuidv4()。

 makeNote = () => {
 const uuidv4 = require('uuid/v4');
 const note = {note:"hello", id:uuidv4() }
 return note;
 }

当您通过笔记进行映射时，只需执行 notes.map(item => <div key={item.id}> {item.note} </div>

除了 uuid，您还可以使用像

这样的函数

getNoteId = () => Math.floor(Math.random() * (9999-1)) + 1;

然后在makeNote函数里面做const note = { note:"hello", id:this.getPostId() };

Answer 3

只需要对每次迭代的父元素进行键控。您可以在 <Fragment> 元素上设置键，as explained in the docs.

至于密钥本身，您可以使用此处建议的任何方法，但我认为有些方法可能有点矫枉过正，因为创建一个唯一的密钥可以是一个单一的衬里，您可以将其放在您认为合适的任何地方 (即，实用程序库，class 方法...)：

uniqueId = () => Math.random().toString(36).substr(2, 9)

Reactjs - 数组或迭代器中的每个 child 都应该有一个唯一的 "key" 属性。如何动态地做到这一点？

Reactjs - Each child in an array or iterator should have a unique "key" prop. How to do that dynamically?

key

unique

node.js

mongoose-schema