การเติม React Dropdown ได้รับข้อผิดพลาด # 31

ฉันมี Javascript เล็กน้อยที่กำหนดเป็น:

populateOptions() {
    var statesMap = [{1: 10}, {2: 20}, {3: 30}];

    return statesMap.map((option, index) => (
        <option key={index} value={option}>{option}</option>
    ));
}

สิ่งนี้ถูกเรียกจากฟังก์ชัน render():

<div className="col-md-3">
<select name="borrowerState" className="form-control dropDownStyle" onChange={this.handleChange} value={this.props.borrower.borrowerState}>
    {this.populateOptions()}
</select>

เมื่อเพจพยายามโหลด ฉันได้รับสิ่งนี้ในคอนโซล:

ข้อผิดพลาด: ข้อผิดพลาด Minified React #31; ไปที่ https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B1%7D&args[]= สำหรับข้อความแบบเต็มหรือใช้ข้อความที่ไม่ย่อเล็กสุด สภาพแวดล้อมการพัฒนาสำหรับข้อผิดพลาดทั้งหมดและคำเตือนที่เป็นประโยชน์เพิ่มเติม ที่ e.exports (ค่าคงที่ js:42)


reactjs javascript ecmascript-6
person Nick Heidke    schedule 24.07.2018    source แหล่งที่มา
comment
วัตถุไม่ถูกต้องในฐานะลูก จากสิ่งที่ฉันเห็นแต่ละตัวเลือกและคีย์และค่าคือวัตถุ คุณได้รับสิ่งนี้ {1:10} สำหรับแต่ละตัวเลือก   -  person Second Son    schedule 24.07.2018

คำตอบ (2)


arrow_upward
3
arrow_downward

คุณกำลังแสดงผลตัวเลือกซึ่งมี object ภายในตัวเลือกที่คุณเลือกซึ่งไม่ถูกต้อง คุณควรแก้ไข stateMap และฟังก์ชันการเรนเดอร์ดังต่อไปนี้

populateOptions() {

        var statesMap = [{'id': 1, 'data': 10}, {'id': 2, 'data': 20}, {'id': 3, 'data': 30}];

        return statesMap.map((option) => (
            <option key={option.id} value={option.data}>{option.data}</option>
        ));
    }
person Anshul Bansal    schedule 24.07.2018

arrow_upward
0
arrow_downward

หมายเหตุด้านข้าง

เนื่องจาก JSON ไม่แยกวิเคราะห์ค่าที่มี key เป็นตัวเลข จึงคาดว่าจะเป็นสตริงเสมอ

ดังนั้น JSON ของคุณยังคงใช้ได้หากคุณเปลี่ยน key เป็นค่าสตริง

ตัวอย่าง

ป้อนคำอธิบายรูปภาพที่นี่

อย่างไรก็ตาม keys ซึ่งไม่ใช่ตัวเลข JSON จะแยกวิเคราะห์เป็นสตริงโดยอัตโนมัติ -

var statesMap = [{name: 10}, {name: 20}, {name: 30}];

เช่นนี้จะถูกแยกวิเคราะห์โดยอัตโนมัติเนื่องจาก key ถือเป็นสตริง

ตัวอย่าง

ป้อนคำอธิบายรูปภาพที่นี่

ฉันหวังว่ามันชัดเจน

person Manoz    schedule 24.07.2018