Ich erstelle eine App, in der der Benutzer sein eigenes Formular entwerfen kann. Geben Sie beispielsweise den Namen des Felds und die Details der anderen Spalten an, die enthalten sein sollen.

Die Komponente ist als JSFiddle verfügbar hier .

Mein Ausgangszustand sieht so aus:

var DynamicForm = React.createClass({
  getInitialState: function() {
   var items = {};
   items[1] = { name: 'field 1', populate_at: 'web_start',
                same_as: 'customer_name',
                autocomplete_from: 'customer_name', title: '' };
   items[2] = { name: 'field 2', populate_at: 'web_end',
                same_as: 'user_name', 
                    autocomplete_from: 'user_name', title: '' };

     return { items };
   },

  render: function() {
     var _this = this;
     return (
       <div>
         { Object.keys(this.state.items).map(function (key) {
           var item = _this.state.items[key];
           return (
             <div>
               <PopulateAtCheckboxes this={this}
                 checked={item.populate_at} id={key} 
                   populate_at={data.populate_at} />
            </div>
            );
        }, this)}
        <button onClick={this.newFieldEntry}>Create a new field</button>
        <button onClick={this.saveAndContinue}>Save and Continue</button>
      </div>
    );
  }

Ich möchte den Status aktualisieren, wenn der Benutzer einen der Werte ändert, aber es fällt mir schwer, das richtige Objekt zu finden:

var PopulateAtCheckboxes = React.createClass({
  handleChange: function (e) {
     item = this.state.items[1];
     item.name = 'newName';
     items[1] = item;
     this.setState({items: items});
  },
  render: function() {
    var populateAtCheckbox = this.props.populate_at.map(function(value) {
      return (
        <label for={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>
      );
    }, this);
    return (
      <div className="populate-at-checkboxes">
        {populateAtCheckbox}
      </div>
    );
  }
});

Wie soll ich basteln this.setState, damit es aktualisiert wird items[1].name?

Sie können den updateUnveränderlichkeitshelfer dafür verwenden :

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

Wenn es Ihnen nicht wichtig ist, Änderungen an diesem Element in einer shouldComponentUpdate()Lebenszyklusmethode mithilfe von zu erkennen ===, können Sie den Status direkt bearbeiten und das erneute Rendern der Komponente erzwingen. Dies entspricht praktisch der Antwort von @limelights Ziehen eines Objekts aus dem Status und Bearbeiten.

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

Nachbearbeitungszusatz:

In der Lektion zur Kommunikation einfacher Komponenten aus dem Reaktionstraining finden Sie ein Beispiel für die Übergabe einer Rückruffunktion von einem übergeordneten Element an eine untergeordnete Komponente, die eine Statusänderung auslösen muss.

Da dieser Thread viele Fehlinformationen enthält, können Sie dies wie folgt ohne Hilfsbibliotheken tun:

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

Sie können die Schritte 2 und 3 kombinieren, wenn Sie möchten:

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

Oder Sie können das Ganze in einer Zeile erledigen:

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

Hinweis: Ich habe itemsein Array erstellt. OP hat ein Objekt verwendet. Die Konzepte sind jedoch dieselben.

Sie können sehen, was in Ihrem Terminal / Ihrer Konsole los ist:

❯ 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

Falscher Weg!

handleChange = (e) => {
    const { items } = this.state;
    items[1].name = e.target.value;

    // update state
    this.setState({
        items,
    });
};

Wie viele bessere Entwickler in den Kommentaren betonten : Mutation des Staates ist falsch!

Ich habe eine Weile gebraucht, um das herauszufinden. Oben funktioniert, aber es nimmt die Kraft von React weg. componentDidUpdateDies wird beispielsweise nicht als Update angezeigt, da es direkt geändert wird.

Also der richtige Weg wäre:

handleChange = (e) => {
    this.setState(prevState => ({
        items: {
            ...prevState.items,
            [prevState.items[1].name]: e.target.value,
        },
    }));
};

Um tief verschachtelte Objekte / Variablen im Status von React zu ändern, werden normalerweise drei Methoden verwendet: Vanilla JavaScript Object.assign, Unveränderlichkeitshelfer und cloneDeepvon Lodash .

Es gibt auch viele andere weniger beliebte Bibliotheken von Drittanbietern, um dies zu erreichen, aber in dieser Antwort werde ich nur diese drei Optionen behandeln. Es gibt auch einige zusätzliche Vanilla-JavaScript-Methoden, wie z. B. das Verbreiten von Arrays (siehe z. B. die Antwort von @ mpen), die jedoch nicht sehr intuitiv, einfach zu verwenden und in der Lage sind, alle Zustandsmanipulationssituationen zu bewältigen.

Wie unzählige Male in den oben abgestimmten Kommentaren zu den Antworten erwähnt wurde, deren Autoren eine direkte Mutation des Staates vorschlagen: Tu das einfach nicht . Dies ist ein allgegenwärtiges Reaktionsmuster, das unweigerlich zu unerwünschten Konsequenzen führt. Lerne den richtigen Weg.

Vergleichen wir drei weit verbreitete Methoden.

Angesichts dieser Zustandsobjektstruktur:

state = {
    outer: {
        inner: 'initial value'
    }
}

Sie können die folgenden Methoden verwenden, um das Innerste zu aktualisieren inner den Wert Felds ohne den Rest des Status zu beeinflussen.

1. Object.assign von Vanilla JavaScript

const App = () => {
  const [outer, setOuter] = React.useState({ inner: 'initial value' })

  React.useEffect(() => {
    console.log('Before the shallow copying:', outer.inner) // initial value
    const newOuter = Object.assign({}, outer, { inner: 'updated value' })
    console.log('After the shallow copy is taken, the value in the state is still:', outer.inner) // initial value
    setOuter(newOuter)
  }, [])

  console.log('In render:', outer.inner)

  return (
    <section>Inner property: <i>{outer.inner}</i></section>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

<main id="react"></main>

Beachten Sie, dass Object.assign kein tiefes Klonen ausführt , da nur Eigenschaftswerte kopiert werden . Daher wird das, was es tut, als flaches Kopieren bezeichnet (siehe Kommentare).

Damit dies funktioniert, sollten wir nur die Eigenschaften primitiver Typen ( outer.inner) bearbeiten, dh Zeichenfolgen, Zahlen, Boolesche Werte.

In diesem Beispiel erstellen wir eine neue Konstante ( const newOuter...), Object.assigndie ein leeres Objekt ( {}) erstellt, outerobject ( { inner: 'initial value' }) hinein kopiert und dann ein anderes Objekt { inner: 'updated value' } darüber kopiert .

Auf diese Weise enthält die neu erstellte newOuterKonstante am Ende einen Wert von, { inner: 'updated value' }da die innerEigenschaft überschrieben wurde. Dies newOuterist ein brandneues Objekt, das nicht mit dem Objekt im Status verknüpft ist, sodass es nach Bedarf mutiert werden kann. Der Status bleibt unverändert und wird erst geändert, wenn der Befehl zum Aktualisieren ausgeführt wird.

Der letzte Teil besteht darin, den setOuter()Setter zu verwenden, um das Original outerim Status durch ein neu erstelltes newOuterObjekt zu ersetzen (nur der Wert ändert sich, der Eigenschaftsname outernicht).

Stellen Sie sich nun vor, wir haben einen tieferen Zustand wie state = { outer: { inner: { innerMost: 'initial value' } } }. Wir könnten versuchen, das newOuterObjekt zu erstellen und es mit dem outerInhalt des Status Object.assignzu füllen innerMost, können jedoch den Wert nicht in dieses neu erstellte newOuterObjekt kopieren , da innerMostes zu tief verschachtelt ist.

Sie können weiterhin kopieren inner, wie im obigen Beispiel, aber da es sich nun um ein Objekt und nicht um ein Grundelement handelt, wird die Referenz von stattdessen auf das newOuter.innerkopiert outer.inner, was bedeutet, dass das lokale newOuterObjekt direkt mit dem Objekt im Status verknüpft ist .

Das bedeutet, dass in diesem Fall Mutationen des lokal erstellten Objekts newOuter.innerdas outer.innerObjekt (im Status) direkt beeinflussen , da sie tatsächlich dasselbe geworden sind (im Speicher des Computers).

Object.assign Daher funktioniert es nur, wenn Sie eine relativ einfache einstufige Tiefenzustandsstruktur mit innersten Elementen haben, die Werte vom primitiven Typ enthalten.

Wenn Sie tiefere Objekte (2. Ebene oder mehr) haben, die Sie aktualisieren sollten, verwenden Sie diese nicht Object.assign. Sie riskieren eine direkte Mutation des Zustands.

2. Lodashs CloneDeep

const App = () => {
  const [outer, setOuter] = React.useState({ inner: 'initial value' })

  React.useEffect(() => {
    console.log('Before the deep cloning:', outer.inner) // initial value
    const newOuter = _.cloneDeep(outer) // cloneDeep() is coming from the Lodash lib
    newOuter.inner = 'updated value'
    console.log('After the deeply cloned object is modified, the value in the state is still:', outer.inner) // initial value
    setOuter(newOuter)
  }, [])

  console.log('In render:', outer.inner)

  return (
    <section>Inner property: <i>{outer.inner}</i></section>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

<main id="react"></main>

Lodashs cloneDeep ist viel einfacher zu bedienen. Es führt ein tiefes Klonen durch , daher ist es eine robuste Option, wenn Sie einen ziemlich komplexen Status mit mehrstufigen Objekten oder Arrays haben. Nur cloneDeep()die State-Eigenschaft der obersten Ebene, mutieren Sie den geklonten Teil nach Belieben und kehren Sie setOuter()zum State zurück.

3. Unveränderlichkeitshelfer

const App = () => {
  const [outer, setOuter] = React.useState({ inner: 'initial value' })
  
  React.useEffect(() => {
    const update = immutabilityHelper
    console.log('Before the deep cloning and updating:', outer.inner) // initial value
    const newOuter = update(outer, { inner: { $set: 'updated value' } })
    console.log('After the cloning and updating, the value in the state is still:', outer.inner) // initial value
    setOuter(newOuter)
  }, [])

  console.log('In render:', outer.inner)

  return (
    <section>Inner property: <i>{outer.inner}</i></section>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
<script src="https://wzrd.in/standalone/immutability-helper@3.0.0"></script>

<main id="react"></main>

immutability-helperauf eine ganz neue Ebene dauert es, und die kühle daran ist , dass es nicht nur in $setdem Zustand Artikel Werte, sondern auch $push, $splice, $merge(etc.) sie. Hier ist eine Liste der verfügbaren Befehle .

Randnotizen

Beachten Sie auch hier, dass setOuternur die Eigenschaften der ersten Ebene des Statusobjekts ( outerin diesen Beispielen) geändert werden, nicht die tief verschachtelten ( outer.inner). Wenn es sich anders verhalten würde, würde diese Frage nicht existieren.

Welches ist das richtige für Ihr Projekt?

Wenn Sie keine externen Abhängigkeiten verwenden möchten oder können und eine einfache Statusstruktur haben , bleiben Sie bei Object.assign.

Wenn Sie einen riesigen und / oder komplexen Zustand manipulieren, cloneDeepist Lodash eine kluge Wahl.

Wenn Sie erweiterte Funktionen benötigen , dh wenn Ihre Statusstruktur komplex ist und Sie alle Arten von Operationen ausführen müssen, versuchen Sie immutability-helper, es ist ein sehr erweitertes Tool, das für die Statusmanipulation verwendet werden kann.

... oder müssen Sie das wirklich überhaupt tun?

Wenn Sie komplexe Daten im Status von React halten, ist dies möglicherweise ein guter Zeitpunkt, um über andere Möglichkeiten nachzudenken, wie Sie damit umgehen können. Das Festlegen komplexer Statusobjekte in React-Komponenten ist keine einfache Operation, und ich empfehle dringend, über verschiedene Ansätze nachzudenken.

Höchstwahrscheinlich sollten Sie Ihre komplexen Daten nicht in einem Redux-Speicher aufbewahren, sie dort mithilfe von Reduzierungen und / oder Sagen festlegen und mithilfe von Selektoren darauf zugreifen.

Ich hatte das gleiche Problem. Hier ist eine einfache Lösung, die funktioniert!

const newItems = [...this.state.items];
newItems[item] = value;
this.setState({ items:newItems });

Laut der React-Dokumentation zu setState ist die Verwendung, Object.assignwie in anderen Antworten vorgeschlagen, hier nicht ideal. Aufgrund der Art des setStateasynchronen Verhaltens können nachfolgende Aufrufe mit dieser Technik frühere Aufrufe überschreiben und unerwünschte Ergebnisse verursachen.

In den React-Dokumenten wird stattdessen empfohlen, das Updater-Formular zu verwenden, setStatedas im vorherigen Status ausgeführt wird. Beachten Sie, dass Sie beim Aktualisieren eines Arrays oder Objekts ein neues Array oder Objekt zurückgeben müssen, da React erfordert, dass der Status unveränderlich bleibt. Wenn Sie den Spread-Operator der ES6-Syntax zum flachen Kopieren eines Arrays verwenden und eine Eigenschaft eines Objekts an einem bestimmten Index des Arrays erstellen oder aktualisieren, sieht dies folgendermaßen aus:

this.setState(prevState => {
    const newItems = [...prevState.items];
    newItems[index].name = newName;
    return {items: newItems};
})

Holen Sie sich zuerst das gewünschte Element, ändern Sie die gewünschten Elemente für dieses Objekt und setzen Sie es wieder auf den Status. Die Art und Weise, wie Sie den Status verwenden, indem Sie nur ein Objekt übergeben, getInitialStatewäre viel einfacher, wenn Sie ein Schlüsselobjekt verwenden würden.

handleChange: function (e) {
   item = this.state.items[1];
   item.name = 'newName';
   items[1] = item;

   this.setState({items: items});
}

Mutieren Sie den Staat nicht. Dies kann zu unerwarteten Ergebnissen führen. Ich habe meine Lektion gelernt! Arbeiten Sie immer mit einer Kopie / einem Klon, Object.assign()ist eine gute:

item = Object.assign({}, this.state.items[1], {name: 'newName'});
items[1] = item;
this.setState({items: items});

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Es ist wirklich einfach.

Ziehen Sie zuerst das gesamte Elementobjekt aus dem Status, aktualisieren Sie den Teil des Elementobjekts wie gewünscht und versetzen Sie das gesamte Elementobjekt über setState wieder in den Status.

handleChange: function (e) {
  items = Object.assign(this.state.items); // Pull the entire items object out. Using object.assign is a good idea for objects.
  items[1].name = 'newName'; // update the items object as needed
  this.setState({ items }); // Put back in state
}

Da keine der oben genannten Optionen für mich ideal war, habe ich letztendlich die Karte verwendet:

this.setState({items: this.state.items.map((item,idx)=> idx!==1 ?item :{...item,name:'new_name'}) })

Mutationsfrei:

// given a state
state = {items: [{name: 'Fred', value: 1}, {name: 'Wilma', value: 2}]}

// This will work without mutation as it clones the modified item in the map:
this.state.items
   .map(item => item.name === 'Fred' ? {...item, ...{value: 3}} : item)

this.setState(newItems)

Fand dies überraschend schwierig und keine der ES6-Verbreitungsmagien schien wie erwartet zu funktionieren. Verwenden Sie eine solche Struktur, um gerenderte Elementeigenschaften für Layoutzwecke abzurufen.

In diesem vereinfachten Beispiel wurde festgestellt, dass die updateMethode von immutability-helperdie einfachste ist:

constructor(props) {
    super(props)
    this.state = { values: [] }
    this.updateContainerState = this.updateContainerState.bind(this)
  }

updateContainerState(index, value) {
    this.setState((state) => update(state, { values: { [index]: { $set: value } } }))
  }

wie von https://github.com/kolodny/immutability-helper#computed-property-names angepasst

des zu aktualisierenden Array-Mitglieds ist ein stärker verschachteltes komplexes Objekt. Verwenden Sie die entsprechende Deep-Copy-Methode die auf der Komplexität basiert.

Es gibt sicherlich bessere Möglichkeiten, mit Layoutparametern umzugehen, aber hier geht es darum, wie man mit Arrays umgeht. Die relevanten Werte für jedes untergeordnete Element könnten auch außerhalb von ihnen berechnet werden. Ich fand es jedoch bequemer, containerState weiterzugeben, damit die untergeordneten Elemente nach Belieben Eigenschaften abrufen und das übergeordnete Statusarray an ihrem angegebenen Index aktualisieren können.

import React from 'react'
import update from 'immutability-helper'
import { ContainerElement } from './container.component.style.js'
import ChildComponent from './child-component'
export default class ContainerComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { values: [] }
    this.updateContainerState = this.updateContainerState.bind(this)
  }

  updateContainerState(index, value) {
    this.setState((state) => update(state, { values: { [index]: { $set: value } } }))
  }

  // ...

  render() {
    let index = 0
    return (
      <ContainerElement>
      <ChildComponent
        index={index++}
        containerState={this.state}
        updateContainerState={this.updateContainerState}
      />
      <ChildComponent
        index={index++}
        containerState={this.state}
        updateContainerState={this.updateContainerState}
      />
      </ContainerElement>
    )
  }
}

Verwenden Sie die Array-Karte mit Pfeilfunktion in einer Zeile

this.setState({
    items: this.state.items.map((item, index) =>
      index === 1 ? { ...item, name: 'newName' } : item,
   )
})

Verwenden Sie das Ereignis ein handleChange, um das geänderte Element herauszufinden und es dann zu aktualisieren. Dazu müssen Sie möglicherweise eine Eigenschaft ändern, um sie zu identifizieren und zu aktualisieren.

Siehe Geige https://jsfiddle.net/69z2wepo/6164/

Ich würde die Änderung des Funktionshandles verschieben und einen Indexparameter hinzufügen

handleChange: function (index) {
    var items = this.state.items;
    items[index].name = 'newName';
    this.setState({items: items});
},

an die dynamische Formularkomponente und übergeben Sie sie als Requisite an die PopulateAtCheckboxes-Komponente. Während Sie Ihre Elemente durchlaufen, können Sie einen zusätzlichen Zähler (im folgenden Code als Index bezeichnet) einfügen, der wie unten gezeigt an die Handle-Änderung übergeben wird

{ Object.keys(this.state.items).map(function (key, index) {
var item = _this.state.items[key];
var boundHandleChange = _this.handleChange.bind(_this, index);
  return (
    <div>
        <PopulateAtCheckboxes this={this}
            checked={item.populate_at} id={key} 
            handleChange={boundHandleChange}
            populate_at={data.populate_at} />
    </div>
);
}, this)}

Schließlich können Sie Ihren Änderungslistener wie unten gezeigt anrufen

<input type="radio" name={'populate_at'+this.props.id} value={value} onChange={this.props.handleChange} checked={this.props.checked == value} ref="populate-at"/>

Wenn Sie nur einen Teil von ändern müssen Array, haben Sie eine Reaktionskomponente mit dem Status auf.

state = {items: [{name: 'red-one', value: 100}, {name: 'green-one', value: 999}]}

Es ist am besten, red-onedas Arraywie folgt zu aktualisieren :

const itemIndex = this.state.items.findIndex(i=> i.name === 'red-one');
const newItems = [
   this.state.items.slice(0, itemIndex),
   {name: 'red-one', value: 666},
   this.state.items.slice(itemIndex)
]

this.setState(newItems)

oder wenn Sie eine dynamisch generierte Liste haben und den Index nicht kennen, sondern nur den Schlüssel oder die ID haben:

let ItemsCopy = []
let x = this.state.Items.map((entry) =>{

    if(entry.id == 'theIDYoureLookingFor')
    {
        entry.PropertyToChange = 'NewProperty'
    }

    ItemsCopy.push(entry)
})


this.setState({Items:ItemsCopy});

Versuchen Sie es mit Code:

this.state.items[1] = 'new value';
var cloneObj = Object.assign({}, this.state.items);

this.setState({items: cloneObj });

Das Befolgen des Codes hat mein langweiliges Gehirn geschont. Entfernen des Objekts und Ersetzen durch das aktualisierte

    var udpateditem = this.state.items.find(function(item) { 
                   return item.name == "field_1" });
    udpateditem.name= "New updated name"                       
    this.setState(prevState => ({                                   
    items:prevState.dl_name_template.filter(function(item) { 
                                    return item.name !== "field_1"}).concat(udpateditem)
    }));

Wie wäre es, eine andere Komponente zu erstellen (für ein Objekt, das in das Array aufgenommen werden muss) und Folgendes als Requisiten zu übergeben?

1. Komponentenindex - Der Index wird zum Erstellen / Aktualisieren im Array verwendet.
2. set function - Diese Funktion fügt Daten basierend auf dem Komponentenindex in das Array ein.

<SubObjectForm setData={this.setSubObjectData}                                                            objectIndex={index}/>

Hier kann {index} basierend auf der Position übergeben werden, an der diese SubObjectForm verwendet wird.

und setSubObjectData kann so etwas sein.

 setSubObjectData: function(index, data){
      var arrayFromParentObject= <retrieve from props or state>;
      var objectInArray= arrayFromParentObject.array[index];
      arrayFromParentObject.array[index] = Object.assign(objectInArray, data);
 }

In SubObjectForm kann this.props.setData bei Datenänderung wie unten angegeben aufgerufen werden.

<input type="text" name="name" onChange={(e) => this.props.setData(this.props.objectIndex,{name: e.target.value})}/>

this.setState({
      items: this.state.items.map((item,index) => {
        if (index === 1) {
          item.name = 'newName';
        }
        return item;
      })
    });

@ JonnyBuchanans Antwort funktioniert einwandfrei, jedoch nur für Array-Statusvariablen. Wenn die Statusvariable nur ein einzelnes Wörterbuch ist, gehen Sie wie folgt vor:

inputChange = input => e => {
    this.setState({
        item: update(this.state.item, {[input]: {$set: e.target.value}})
    })
}

Sie können [input]durch den Feldnamen Ihres Wörterbuchs und e.target.valuedurch dessen Wert ersetzen . Dieser Code führt den Aktualisierungsjob beim Eingabeänderungsereignis meines Formulars aus.

Versuchen Sie dies, es wird definitiv funktionieren, in einem anderen Fall habe ich es versucht, aber es hat nicht funktioniert

import _ from 'lodash';

this.state.var_name  = _.assign(this.state.var_name, {
   obj_prop: 'changed_value',
});

 handleChanges = (value, key) => {
     // clone the current State object
    let cloneObject = _.extend({}, this.state.currentAttribute);
    // key as user.name and value= "ABC" then current attributes have current properties as we changes
    currentAttribute[key] = value;
    // then set the state "currentAttribute" is key and "cloneObject" is changed object.  
    this.setState({currentAttribute: cloneObject});

und Ändern aus Textfeld onChange-Ereignis hinzufügen

onChange = {
   (event) => {                                                
      this.handleChanges(event.target.value, "title");
   }
}