<p>Ich erstelle eine Anwendung, in der Benutzer ihre eigenen Formulare entwerfen können. Zum Beispiel. Geben Sie den Namen des Felds und Details zu anderen Spalten an, die einbezogen werden sollen. </p> <p>Diese Komponente ist als JSFiddle verfügbar. </p> <p>Mein Ausgangszustand sieht so aus: </p> <pre class="brush:php;toolbar:false;">var DynamicForm = React.createClass({ getInitialState: function() { var items = {}; items[1] = { name: 'field 1', populate_at: 'web_start', same_as: 'Kundenname', autocomplete_from: 'Kundenname', Titel: '' }; items[2] = { name: 'field 2', populate_at: 'web_end', same_as: 'Benutzername', autocomplete_from: 'Benutzername', Titel: '' }; Artikel zurücksenden }; }, render: function() { var _this = this; zurückkehren ( <div> { Object.keys(this.state.items).map(function (key) { var item = _this.state.items[key]; zurückkehren ( <div> <PopulateAtCheckboxes this={this} geprüft={item.populate_at} id={key} populate_at={data.populate_at} /> </div> ); }, Das)} <button onClick={this.newFieldEntry}>Neues Feld erstellen</button> <button onClick={this.saveAndContinue}>Speichern und fortfahren</button> </div> ); }</pre> <p>Ich möchte den Status aktualisieren, wenn der Benutzer einen Wert ändert, aber ich habe Probleme, das richtige Objekt zu finden: </p> <pre class="brush:php;toolbar:false;">var PopulateAtCheckboxes = React.createClass({ handleChange: Funktion (e) { item = this.state.items[1]; item.name = 'newName'; Artikel[1] = Artikel; this.setState({items: items}); }, render: function() { var populateAtCheckbox = this.props.populate_at.map(function(value) { zurückkehren ( <label for={value}> <input type="radio" name={'populate_at'+this.props.id} value={value} onChange={this.handleChange} reviewed={this.props.checked == value} ref="populate-at"/> {Wert} </label> ); }, Das); zurückkehren ( <div className="populate-at-checkboxes"> {populateAtCheckbox} </div> ); } });</pre> <p>Wie soll ich <code>this.setState</code> erstellen, damit <code>items[1].name</code> aktualisiert wird? </p>

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

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

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

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

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

❯ 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