動的に生成されたフォームトラッキングの変更が変わりますが、未定義を返します -- reactjs フィールド と react-redux フィールド 関連 問題

Dynamically generated form tracking changes but returning undefined












0
vote

問題

日本語

テキスト入力で構成されたフォームを動的に生成するためのクラスを使用しています。私は私の状態でデータを配列に保存します。 My handleInputChange 関数はデータを追跡していますが、私のHandleInputChangeメソッドの list[index][name] = value で失敗します。エラーは<コード> cannot set property playerName of undefined です。誰かが私がこの作業を得ることができる方法を説明するのを助けることができますか?

<事前> <コード> AError0
英語

I'm using a class to dynamically generate a form made up of text inputs. I will be storing the data in an array in my state. My handleInputChange function is tracking the data, but it fails at the list[index][name] = value part of my HandleInputChange method. The error is cannot set property playerName of undefined. Can anyone help explain how I can get this working?

import React, { Component } from "react";  class Form extends Component {   constructor(props) {     super(props);      this.state = {       playerNames: [],     };      this.handleInputChange = this.handleInputChange.bind(this);   }    handleInputChange = (e, index) => {     const { playerNames } = this.state;     const { name, value } = e.target;     const list = [...playerNames];     list[index][name] = value;     this.setState({ playerNames: this.list });   };    handleClick = () => {     const { playerNames } = this.state;     this.setState([...this.playerNames, { playerName: "" }]);   };    render() {     const { playerNames } = this.state;     const { noPlayers, handleClick } = this.props;     let multiples = [];     for (var i = 0; i < noPlayers; i++) {       multiples.push(<div></div>);     }     return (       <div>         <form>           <label className="block">             <>               {multiples.map((input, index) => (                 <input                   key={index}                   name="playerName"                   className="form-input mt-1 block w-full"                   type="text"                   placeholder={"Player " + (index + 1)}                   value={index.playerName}                   onChange={(e) => this.handleInputChange(e, index)}                 />               ))}             </>           </label>           <button             className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"             onClick={handleClick}           >             Submit           </button>         </form>       </div>     );   } }  export default Form; 
</div
     

回答リスト

1
 
vote
vote
ベストアンサー
 
<事前> <コード> try { if (1 === $foo) { throw new Exception(sprintf('Invalid foo: %s', serialize($foo)), 1); } if (2 === $bar) { throw new Exception(sprintf('Invalid bar: %s', serialize($foo)), 2); } } catch (Exception $e) { switch ($e->getCode()) { case 1: // Special handling for case 1 break; case 2: // Special handling for case 2 break; default: // Special handling for all other cases } } 5

は、配列内に初期オブジェクトがないため失敗します。

PlayerNamesが

のようなものになることを想定して <事前> <コード> catch(Error $e){ }16

を変更する必要があります <事前> <コード> try { if (1 === $foo) { throw new Exception(sprintf('Invalid foo: %s', serialize($foo)), 1); } if (2 === $bar) { throw new Exception(sprintf('Invalid bar: %s', serialize($foo)), 2); } } catch (Exception $e) { switch ($e->getCode()) { case 1: // Special handling for case 1 break; case 2: // Special handling for case 2 break; default: // Special handling for all other cases } } 7

新しいオブジェクトを使用して新しいリストを作成する

<事前> <コード> try { if (1 === $foo) { throw new Exception(sprintf('Invalid foo: %s', serialize($foo)), 1); } if (2 === $bar) { throw new Exception(sprintf('Invalid bar: %s', serialize($foo)), 2); } } catch (Exception $e) { switch ($e->getCode()) { case 1: // Special handling for case 1 break; case 2: // Special handling for case 2 break; default: // Special handling for all other cases } } 8
 
list[index][name] = value 

fails because there are no initial objects inside the array.

Assuming you want playerNames to be something like

[   { playername: "input1 value" },   { playername: "input2 value" },   { playername: "input3 value" }, ]; 

You need to change

const list = [...playerNames]; list[index][name] = value; this.setState({ playerNames: this.list }); 

to create a new list with new objects every time

const list = [...playerNames]; list[index] = {[name]:value}; this.setState({ playerNames: list }); 
</div
 
 

関連する質問

0  React Router V4.1.1  ( React router v4 1 1 ) 
この簡単なアプリケーションをサポートするためにこの簡単なアプリケーションをサポートしようとしています https://github.com / jackfranklin / universal-reat-example v4.1.1に。 package.js...

3  REAT SELECTをREDUX REAIT形式で選択してください  ( React select with redux react form ) 
React-SelectとReact Reduxフォーム( https:// github。 COM / Davidkpiano / React-Redux-Form これは私の現在のコンポーネント設定されています、そして私は他のコンポーネントからの小道具...

1  反応/ REDUX複数行動  ( React redux multiple actions ) 
他のハンドラの後に、複数の(同期)アクションを1つずつディスパッチすることは悪い考えですか? 私は3つのボタンを持っているとします:ボタン、ボタンBとボタンC。 私の最初の減速機のためにどのボタンをクリックしたかを知ることが重要ですので、このように見えるかもし...

0  複数のAPIコールを持つREDUX観測可能エピックを作成する - 最初の結果を2番目に渡す  ( Creating a redux observable epic with multiple api calls passing the results o ) 
これは、このような質問が初めてではありませんが、何らかの理由で私は観戦物とrxjsの周りに頭を包むのに本当の苦労しているので、私はいくつかの説明を求めると思いました。< / P> 私は次のような叙事詩を書いています: 文字列を受け取る その文字列に基づいてA...

0  タブを変更するときにすべてのタブを末尾にTabNavigator  ( Tabnavigator trailing through all the tabs when changing the tab ) 
反応ナビゲーションのTabNavigatorを使用して、1番目のタブから4番目のタブへのタブをタップすると、4番目のタブに移行しながら2番目と3番目のタブを垣間見ることができます。とにかくそれを避けるためのものはありますか? ...

0  「USEDISPATCH」のみの「React-Hooks / Entrutive-Deps」を無効にします。  ( Disable react hooks exhaustive deps for result of usedispatch only ) 
私はこのようなReact-Reduxコードを持っています: <事前> <コード> useLayoutEffect(() => { if (someLogic) { dispatch(someAction()); } }, [...

4  ReferenceError:ウィンドウが定義されていません。 JESTによる単体テストにNPMテストを実行すると、このエラーが発生しました  ( Referenceerror window is not defined i got this error when i run npm test to u ) 
ReferenceError:ウィンドウが定義されていません。 NPMテストをJESTによる単体テストに実行すると、このエラーが発生しました。エラーは次のコードエクスポート機能から来ています。このタイプのエラーを満たしてそれを解決しましたか? <事前> <コ...

0  RECOT REDUX - 「FETCH」を適用し、ディスパッチの内部にディスパッチが失敗する  ( React redux applying a fetch and dispatch inside of a dispatch fails ) 
JWTトークンをシンプルコール "SASEJWT(DATA)"で保存する作業アクションがあります。 これはアクションです: <事前> <コード> export const requestLoginToken = (username, password) =>...

0  React + Socket.io - ユーザーの間にメッセージを発行できません  ( React socket io unable to emit messages inbetween users ) 
エラー:それは単一のユーザーにとってうまく機能していますが、私は同じ "Room"に参加するために別のChromeタブを使います、それは他の人のメッセージを表示しません(彼らが存在しないかのように)。 私は小さなバグがあると確信しています。 部屋と名前の状態管...

0  削減ケース機能を不変JSに変更する方法  ( How to change the reducer case function to immutable js ) 
オブジェクトのカウント値を更新するためのコードがあります。今、私はそれをimutable.jsに変換する必要があります。私はImmutable.jsにとってほとんど新しいものです。では、このコードをimmutable.js形式に変換する方法を教えてください。 ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有