Mengisi React Dropdown Mendapatkan Kesalahan #31

Saya memiliki sedikit Javascript yang didefinisikan sebagai:

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

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

Ini dipanggil dari fungsi render():

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

Saat halaman mencoba memuat, saya mendapatkan ini di konsol:

Kesalahan: Kesalahan React yang diperkecil #31; kunjungi https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B1%7D&args[]= untuk pesan lengkap atau gunakan pesan yang tidak diperkecil lingkungan dev untuk kesalahan lengkap dan peringatan tambahan yang bermanfaat. di e.exports (invariant.js:42)


reactjs javascript ecmascript-6
person Nick Heidke    schedule 24.07.2018    source sumber
comment
Objek tidak valid sebagai anak-anak, dari apa yang saya lihat setiap opsi dan kunci serta nilai adalah sebuah objek. Anda mendapatkan sesuatu seperti ini {1:10} untuk setiap opsi.   -  person Second Son    schedule 24.07.2018

Jawaban (2)


arrow_upward
3
arrow_downward

Anda merender opsi yang merupakan object di dalam opsi pilihan Anda yang salah. Anda harus memodifikasi StatesMap dan fungsi render seperti di bawah ini.

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

Sebagai catatan tambahan

Karena JSON tidak mengurai nilai yang memiliki key sebagai numerik, JSON selalu mengharapkannya berupa string.

Jadi JSON Anda tetap valid jika Anda mengubah key menjadi nilai string

Contoh

masukkan deskripsi gambar di sini

Namun, keys yang bukan numerik, JSON secara otomatis menguraikannya menjadi string -

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

Seperti ini akan diurai secara otomatis karena key dianggap sebagai string.

Contoh

masukkan deskripsi gambar di sini

Saya harap ini jelas.

person Manoz    schedule 24.07.2018