Bagaimana untuk menggunakan setState untuk mengemas kini state.item dalam keadaan?
P粉464208937
P粉464208937 2023-08-23 17:35:11
0
2
340
<p>Saya sedang mencipta aplikasi di mana pengguna boleh mereka bentuk borang mereka sendiri. Sebagai contoh. Nyatakan nama medan dan butiran lajur lain yang perlu disertakan. </p> <p>Komponen ini tersedia sebagai JSFiddle. </p> <p>Keadaan awal saya kelihatan seperti ini:</p> <pre class="brush:php;toolbar:false;">var DynamicForm = React.createClass({ getInitialState: function() { var item = {}; item[1] = { name: 'field 1', populate_at: 'web_start', same_as: 'nama_pelanggan', autolengkap daripada: 'nama_pelanggan', tajuk: '' }; item[2] = { name: 'field 2', populate_at: 'web_end', same_as: 'nama_pengguna', autolengkap daripada: 'nama_pengguna', tajuk: '' }; kembalikan { item }; }, render: function() { var _ini = ini; kembali ( <div> { Object.keys(this.state.items).map(function (key) { var item = _this.state.items[key]; kembali ( <div> <PopulateAtCheckboxes this={this} checked={item.populate_at} id={key} populate_at={data.populate_at} /> </div> ); }, ini)} <butang onClick={this.newFieldEntry}>Buat medan baharu</button> <butang onClick={this.saveAndContinue}>Simpan dan Teruskan</button> </div> ); }</pre> <p>Saya mahu mengemas kini keadaan apabila pengguna menukar sebarang nilai, tetapi saya menghadapi masalah mencari objek yang betul: </p> <pre class="brush:php;toolbar:false;">var PopulateAtCheckboxes = React.createClass({ handleChange: fungsi (e) { item = this.state.item[1]; item.name = 'newName'; item[1] = item; this.setState({item: item}); }, render: function() { var populateAtCheckbox = this.props.populate_at.map(function(value) { kembali ( <label untuk={value}> <input type="radio" name={'populate_at'+this.props.id} value={value} onChange={this.handleChange} checked={this.props.checked == value} ref="populate-at"/> {value} </label> ); }, ini); kembali ( <div className="populate-at-checkboxes"> {populateAtCheckbox} </div> ); } });</pre> <p>Bagaimana saya harus membuat <code>this.setState</code> supaya ia mengemas kini <code>item[1].name</code>? </p>
P粉464208937
P粉464208937

membalas semua(2)
P粉798343415

Anda boleh menggunakan 更新penolong kebolehubah untuk mencapai ini : p>

this.setState({
  items: update(this.state.items, {1: {name: {$set: 'updated field name'}}})
})

Sebagai alternatif, jika anda tidak peduli untuk dapat mengesan perubahan pada ini menggunakan kaedah kitar hayat ===shouldComponentUpdate(), anda boleh mengedit keadaan secara terus dan memaksa komponen untuk dipaparkan semula - ini sebenarnya sama dengan jawapan @limelights, kerana ia menarik objek keluar dari keadaan dan Editnya.

this.state.items[1].name = 'updated field name'
this.forceUpdate()

Suntingan kemudian ditambahkan:

Lihat pelajaran dalam Komunikasi Komponen Mudah latihan tindak balas untuk contoh cara menghantar fungsi panggil balik daripada keadaan penahanan komponen induk kepada komponen anak yang perlu mencetuskan perubahan keadaan.

P粉709307865

Begini cara melakukannya tanpa perpustakaan pembantu:

handleChange: function (e) {
    // 1. Make a shallow copy of the items
    let items = [...this.state.items];
    // 2. Make a shallow copy of the item you want to mutate
    let item = {...items[1]};
    // 3. Replace the property you're intested in
    item.name = 'newName';
    // 4. Put it back into our array. N.B. we *are* mutating the array here, 
    //    but that's why we made a copy first
    items[1] = item;
    // 5. Set the state to our new copy
    this.setState({items});
},

Anda boleh menggabungkan langkah 2 dan 3 jika perlu:

let item = {
    ...items[1],
    name: 'newName'
}

Atau anda boleh melakukan semuanya dalam satu baris:

this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));

Nota: Saya mencipta items sebagai tatasusunan. OP menggunakan objek. Walau bagaimanapun, konsepnya adalah sama.


Anda boleh melihat apa yang berlaku di terminal/konsol:

❯ node
> items = [{name:'foo'},{name:'bar'},{name:'baz'}]
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ]
> clone = [...items]
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ]
> item1 = {...clone[1]}
{ name: 'bar' }
> item1.name = 'bacon'
'bacon'
> clone[1] = item1
{ name: 'bacon' }
> clone
[ { name: 'foo' }, { name: 'bacon' }, { name: 'baz' } ]
> items
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] // good! we didn't mutate `items`
> items === clone
false // these are different objects
> items[0] === clone[0]
true // we don't need to clone items 0 and 2 because we're not mutating them (efficiency gains!)
> items[1] === clone[1]
false // this guy we copied
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!