How should I correctly use setState for the following object

Adrian

If I have the following object in state. What is the correct way to write a setState function to update formList[1].name from "Name2" to "New Name"? Each of these fields are linked to an input field.

state = {
  formList = {
    0 : {
      id: 10,
      name: "Name1",
      date: "11/27/2019"
    },
    1 : {
      id: 11,
      name: "Name2",
      date: "11/27/2019"
    }
  }
}

I tried the below. Where for my example above, index is passed 1 and field is passed "name". I would like to keep the field name dynamic so that I could use this for all input fields

METHOD 1

updateForm = (e, index, field) => {
  const newValue = e.target.value;
  this.setState((prevState) => {
    return {
      edittedDataList: {
        ...prevState.edittedDataList,
        [prevState.edittedDataList[index][field]]: newValue
      }
    }
  })
}

But whenever I start typing into the name input field, my state changes to the below

RESULT 1

state = {
  formList = {
    0 : {
      id: 10,
      name: "Name1",
      date: "11/27/2019"
    },
    1 : {
      id: 11,
      name: "Name2",
      date: "11/27/2019"
    },
    Name2: "Name21" // where 1 is the character I pressed
  }
}

I also tried setting state using the below. It actually works with setting the state but I believe it may mutate the state so I don't think it is the correct way to setState. It also has a weird side effect

METHOD 2

updateForm = (e, index, field) => {
  const newValue = e.target.value;
  this.setState((prevState) => {
    return prevState.edittedDataList[editAtIndex][field] = newValue;
  })
}

RESULT 2

state = {
  0: "N",
  1: "e",
  2: "w",
  3: " ",
  4: "N",
  5: "a",
  6: "m",
  7: "e",
  formList = {
    0 : {
      id: 10,
      name: "Name1",
      date: "11/27/2019"
    },
    1 : {
      id: 11,
      name: "New Name",
      date: "11/27/2019"
    }
  }
}

Can someone show me the correct way to write setState and explain why my current setState functions are having strange results?

Thanks in advance

Kousha

Try

updateForm = (e, index, field) => {
  const { edittedDataList } = this.state;
  edittedDataList[index][field] = e.target.value;

  this.setState({ edittedDataList });
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

How should one use the setState() method in ReactJS?

How should i manipulate angularjs resource object for use in the view

How should I handle component state following single responsibility pattern

How Do I Correctly Set a getElementById Object?

How can I refactor this setState by looping through the object?

How can I use the following formula to determine the value of a variable?

How to use correctly JSON.stringify with an PHP returned JS object

How do I correctly iterate through an object in render?

How do I use GPL and MIT licenses correctly?

How can I use JTextField to read the inputted text correctly?

How can I correctly use djangify with the django framework?

How do I correctly use Control.Exception.catch in Haskell?

How to use OnTouchEvent Correctly?

How should i implement polymorphic references of type object in project?

How should I implement a cache object/system in Spring?

How should I check for dupplicate entity in an object collection?

How should I structure a deep linking config object to work with these navigators?

How can I change my following quick sort code so that I can use randomized pivot?

How does getUserPrincipal() work? When should i use it?

Should I use 'memcpy' on class that contains a virtual method?If not, how to replace it?

Which text field should I use in word and how to fill it

Should I use generic foreign key with Django, and how?

Should code be rewritten or should I use methods?

How to correctly mock an ObjectMapper object

How to correctly mock an ObjectMapper object

How can I use provider package inplace of setState to change button color?

Should I use remember with animateDpAsState?

Should I use asObservable in BehaviorSubject?

Should I use AcceptEx() or WSAAccept()?

TOP 一覧

  1. 1

    Unity:未知のスクリプトをGameObject(カスタムエディター)に動的にアタッチする方法

  2. 2

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  3. 3

    Ansibleで複数行のシェルスクリプトを実行する方法

  4. 4

    tkinterウィンドウを閉じてもPythonプログラムが終了しない

  5. 5

    Crashlytics:コンパイラー生成とはどういう意味ですか?

  6. 6

    GoDaddyでのCKEditorとKCfinderの画像プレビュー

  7. 7

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  8. 8

    Chromeウェブアプリのウェブビューの高さの問題

  9. 9

    モーダルダイアログを自動的に閉じる-サーバーコードが完了したら、Googleスプレッドシートのダイアログを閉じます

  10. 10

    Windows 10の起動時間:以前は20秒でしたが、現在は6〜8倍になっています

  11. 11

    Reactでclsxを使用する方法

  12. 12

    ファイル内の2つのマーカー間のテキストを、別のファイルのテキストのセクションに置き換えるにはどうすればよいですか?

  13. 13

    MLでのデータ前処理の背後にある直感

  14. 14

    グラフからテーブルに条件付き書式を適用するにはどうすればよいですか?

  15. 15

    Pythonを使用して同じ列の同じ値の間の時差を取得する方法

  16. 16

    mutate_allとifelseを組み合わせるにはどうすればよいですか

  17. 17

    ネットワークグラフで、ネットワークコンポーネントにカーソルを合わせたときに、それらを強調表示するにはどうすればよいですか?

  18. 18

    テキストフィールドの値に基づいて UIslider を移動します

  19. 19

    BLOBストレージからデータを読み取り、Azure関数アプリを使用してデータにアクセスする方法

  20. 20

    PowerShellの分割ファイルへのヘッダーの追加

  21. 21

    ソートされた検索、ターゲット値未満の数をカウント

ホットタグ

アーカイブ