質問編集履歴

進捗分更新

2020/12/17 00:50

投稿

yuki-o0413

スコア8

test CHANGED Viewed

	@@ -1 +1 @@
1	- Reduxにて、フォームに入力した内容が~~テーブルに出力~~されるようにしたい
1	+ Reduxにて、フォームに入力した内容が登録されるようにしたい

test CHANGED Viewed

@@ -1,38 +1,42 @@
 フォームにて、入力した内容がlogで出力されるようにしたいが、
-でエラーが出てしまいます。
+表示画面にて入力を行うとエラーが出てしまいます。
 エラー内容
 ```
-Content.js:57 Uncaught TypeError: Cannot read property 'id' of undefined
+App.js:25 Uncaught TypeError: _actions__WEBPACK_IMPORTED_MODULE_1__.updateFormId is not a function
+    at Object.updateFormId (App.js:25)
+    at Object.onChangeId (App.js:21)
-    at Content (Content.js:57)
+    at onChange (Content.js:36)
+　　・・・
-```
+```
-```
+```
-react-dom.development.js:19814 The above error occurred in the <Content> component:
+Uncaught TypeError: this.props.updateFormName is not a function
+    at Object.onChangeName (App.js:25)
-    in Content (created by App)
+    at onChange (Content.js:43)
-```
+```
-```
-Content.js:57 Uncaught TypeError: Cannot read property 'id' of undefined
-    at Content (Content.js:57)
-```
-・idが定義されていないと言われていますが、どう直せば良いのか分からず、進めないでいます。
+・updateFormIdとupdateFormNameが関数ではないと言われていますが、具体的にどう直せば良いのか分からず、進めないでいます。
+React、JavaScript学習初めて１ヶ月の初心者です。
+サンプルコードを真似しつつコードを書いてます。
-React、JavaScript初心者です。改善点、問題解決のためのアプローチの方法、アドバイスいただけたらありがたいです。お願いします。
+改善点、問題解決のためのアプローチの方法、アドバイスいただけたらありがたいです。お願いします。
 また、他に必要な情報があればあ追記します。
@@ -42,7 +46,7 @@
 'use strict';
-import React from 'react';
+import React,{ useState } from 'react';
 import { createStore } from "redux";
@@ -50,328 +54,374 @@
 export default function Content(props) {
-    // 変数を定義、空の配列を作っている
-    const ids = [];
-    const names = [];
-    const pvs = [];
-    const reducer = () => {
-        console.log("reducer has been called.");
-    }
-    const store = createStore(reducer, 1);
-    store.subscribe(() => {
-        console.log("store changed", store.getState());
-        });
-    store.dispatch({type: "INC"});
-    // ループでテーブルに順に入れ込むためのコード
-    for (  let i = 1;  i <= 10;  i++  ) {
-        ids.push(i)
-        names.push("name" + i)
-        pvs.push(Math.floor( Math.random() * 1000 ))
-    }
-    // ボディのテーブルに入れ込むための変数用意
-    console.log(pvs);
-    const tbody =  ids.map((id,index)=>{
-        return(
-            <tr key={index}>
-                <td>{id}</td><td>{ names[index] }</td><td>{pvs[index]}</td>
-            </tr>
+    const ids = props.formItem.id;
+    const names = props.formItem.name;
+    console.log(props.formItem.id["list"])
+    // const ids = props.formItem.id;
+    console.log(ids)
+    return (
+        <>
+            <p>content</p>
+            <Form
+                onChangeId={props.onChangeId}
+                onChangeName={props.onChangeName}
+            />
+            <button type="button"
+                className="btn btn-outline-success"
+                onClick={() => props.onSaveItem()} >
+                SAVE
+            </button>
+        </>
+    );
+}
+function Form(props) {
+    return (
+        <div className="form-group">
+            <label className="pt-2">ID</label>
+            <input id="1"
+                type="text"
+                className="form-control"
+                value={props.id}
+                onChange={(e) => props.onChangeId(e)}
+            />
+            <label className="pt-2">Name</label>
+            <input id="2"
+                type="text"
+                className="form-control"
+                value={props.name}
+                onChange={(e) => props.onChangeName(e)}
+            />
+        </div>
+    )
+}
+```
+```App.js
+import React, { Component } from 'react';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import Top from './components/Top';
+import Content from './components/Content';
+class App extends Component {
+    constructor(props) {
+        super(props);
+    }
+    componentDidMount() {
+        const id = 1;
+        const name = "name1";
+        this.props.didMnt(id,name);
+    }
+    // formId
+    onChangeId = (e) => {
+        this.props.updateFormId(e.target.id);
+    }
+    // forName
+    onChangeName = (e) => {
+        this.props.updateFormName(e.target.name);
+    }
+    // clickSaveButton
+    onSaveItem = () => {
+        console.log("SAVE_ID: ",this.props.conditions.id);
+        console.log("SAVE_NAME: ",this.props.conditions.name);
+    }
+    render() {
+        console.log(this.props);
+        const formItem = this.props
+        // formEvent
+		const contentHandler = ({onChangeId, onChangeName, onSaveItem}) => ({ onChangeId, onChangeName, onSaveItem })
+        console.log('App.render:', this.props);
+        return (
+            <div className="content">
+                <Header />
+                    sample site
+                {/* <div className="row">
+                    <div className="col-5">
+                        <p>test</p>
+                    </div>
+                </div> */}
+                <Top />
+                <br />
+                <br />
+                <br />
+                <div className="container">
+                    <Content formItem={formItem} {...contentHandler(this)} />
+                </div>
+                <br />
+                <br />
+                <br />
+                <Footer />
+            </div>
         );
-    });
-    return (
-        <>
-            <h1>
-                Redux課題やってます
-            </h1>
-            <table className="table">
-                <thead className="table-dark">
-                    <tr>
-                        <th scope="col-2">id</th>
-                        <th scope="col-4">name</th>
-                        <th scope="col-6">pv</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    { tbody }
-                </tbody>
-            </table>
-        </>
+    }
+}
+export default App;
+```
+```containers/App.js
+import { connect } from 'react-redux';
+import * as actions from '../actions';
+import App from '../App';
+const mapStateToProps = state => {
+    const  {id,name} = state;
+    return {id,name}
+}
+const mapDispatchToProps = dispatch => {
+    return {
+        didMnt: (id,name) => dispatch(actions.didMnt(id,name)),
+        updateFormId: (id) => dispatch(actions.updateFormId(id)),
+    }
+}
+export default connect(mapStateToProps, mapDispatchToProps)(App)
+```
+```createStore.js
+import { createStore as reduxCreateStore, combineReducers } from "redux";
+export default function createStore() {
+    const store = reduxCreateStore(
+        combineReducers({
+            id,
+            name
+        })
     );
-}
-export default function LoginForm(props) {
-    return(
-        <div className="card shadow-sm">
-            <div className="card-body">
-                <form>
-                    <div className="form-group">
-                        <label htmlFor="inputName" className="col-form-label">name</label>
-                        <input type="text"
-                                className="form-control"
-                                id="inputName"
-                                placeholder="name"
-                                value={props.authenticationDetails.Name}
-                                onChange={(e) => props.onChangeInputName(e)} />
-                    </div>
-                </form>
-            </div>
-        </div>
-    )
-}
-```
-```App.js
-import React, { Component } from 'react';
-import Header from './components/Header';
-import Footer from './components/Footer';
-import Top from './components/Top';
-import Content from './components/Content';
-class App extends Component {
-    constructor(props) {
-        super(props);
-    }
-    componentDidMount() {
-        const id = 1
-        const name = "name"
-        this.props.didMnt(id,name);
-    }
-    onChangeId = (e) => {
-        this.props.updateFormId(e.target.value);
-    }
-    // forName
-    onChangeName = (e) => {
-        this.props.updateFormName(e.target.value);
-    }
-    onSaveItem = () => {
-        console.log("SAVE_ID: ",this.props.conditions.id);
-        console.log("SAVE_NAME: ",this.props.conditions.name);
-    }
-    componentDidMount() {
-        (async () => {
-            const test = "test"
-            this.props.didMnt(test);
-        })();
-    }
-    render() {
-        console.log('App.render:', this.props);
-        const data1 = "AAAA";
-        const data2 = "data2";
-        const topData = ({data1}) => ({data1})
-        const contentData = ({data2}) => ({data2})
-        const ja = "*****Japan!";
-        const formItem = this.props
-        // formEvent
-		const contentHandler = ({onChangeId, onChangeName}) => ({onChangeId, onChangeName})
-        return (
-            <div className="content">
-                <Header />
-                    sample site
-                <div className="row">
-                    <div className="col-3">
-                        <h1>{ja}</h1>
-                    </div>
-                    <div className="col-5">
-                        <p>test</p>
-                    </div>
-                </div>
-                <Top data1={data1} />
-                <br />
-                <br />
-                <br />
-                <div className="container">
-                <Content formItem={formItem} {...contentHandler(this)}/>
-                </div>
-                <br />
-                <br />
-                <br />
-            </div>
-        );
-    }
-}
-export default App;
-```
+    return store;
+}
+```
+```actions.js
+export const didMnt = (id, name) => {
+    return {
+        type: 'DID_MOUNT',
+        payload: { id, name }
+    };
+}
+```
+```reducers.js
+const initialState = {
+    list: -1
+}
+export function id(state = initialState, action) {
+    const newState = JSON.parse(JSON.stringify(state));
+    switch (action.type) {
+        case 'DID_MOUNT':
+            newState.list = action.payload.id;
+            break;
+        default:
+            return state;
+    }
+    return newState;
+};
+export function name(state = initialState, action) {
+    const newState = JSON.parse(JSON.stringify(state));
+    switch (action.type) {
+        case 'DID_MOUNT':
+            newState.list = action.payload.name;
+            break;
+        default:
+            return state;
+    }
+    return newState;
+};
+```

エラーの内容修正

2020/12/17 00:50

投稿

yuki-o0413

スコア8

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,34 +1,56 @@
-Reduxを使い、フォームで入力した内容がテーブルに登録されるようにしたいが、
+フォームにて、入力した内容がlogで出力されるようにしたいが、
-handleChange、handleSubmitでエラーが出てしまいます。
+でエラーが出てしまいます。
 エラー内容
+```
+Content.js:57 Uncaught TypeError: Cannot read property 'id' of undefined
-「';' が必要です。ts(1005)」
+    at Content (Content.js:57)
+```
+```
+react-dom.development.js:19814 The above error occurred in the <Content> component:
+    in Content (created by App)
+```
+```
+Content.js:57 Uncaught TypeError: Cannot read property 'id' of undefined
-→セミコロンをつけてもエラーは解決できませんでした
+    at Content (Content.js:57)
+```
+・idが定義されていないと言われていますが、どう直せば良いのか分からず、進めないでいます。
 React、JavaScript初心者です。改善点、問題解決のためのアプローチの方法、アドバイスいただけたらありがたいです。お願いします。
+また、他に必要な情報があればあ追記します。
-```JavaScript
+```Content.js
 'use strict';
 import React from 'react';
+import { createStore } from "redux";
 export default function Content(props) {
-    // 変数を定義
+    // 変数を定義、空の配列を作っている
     const ids = [];
@@ -38,29 +60,27 @@
-    this.state = {value: ''};
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    handleChange(event) {
+    const reducer = () => {
-        this.setState({value: event.target.value});
+        console.log("reducer has been called.");
-    }
+    }
+    const store = createStore(reducer, 1);
-    handleSubmit(event) {
+    store.subscribe(() => {
-        alert('A name was submitted: ' + this.state.value);
+        console.log("store changed", store.getState());
-        event.preventDefault();
-    }
+        });
+    store.dispatch({type: "INC"});
@@ -88,7 +108,7 @@
             <tr key={index}>
-                <td>{id}</td>{ names[index] }<td>{pvs[index]}</td>
+                <td>{id}</td><td>{ names[index] }</td><td>{pvs[index]}</td>
             </tr>
@@ -104,7 +124,7 @@
             <h1>
-                Redux課題やってます・・・
+                Redux課題やってます
             </h1>
@@ -130,24 +150,228 @@
                 </tbody>
-                <form onSubmit={this.handleSubmit}>
-                    <label>
-                        name:
-                    </label>
+            </table>
+        </>
+    );
+}
+export default function LoginForm(props) {
+    return(
+        <div className="card shadow-sm">
+            <div className="card-body">
+                <form>
+                    <div className="form-group">
-                    <input type="text" value={this.state.value} onChange={this.handleChange} />
+                        <label htmlFor="inputName" className="col-form-label">name</label>
+                        <input type="text"
+                                className="form-control"
+                                id="inputName"
+                                placeholder="name"
+                                value={props.authenticationDetails.Name}
+                                onChange={(e) => props.onChangeInputName(e)} />
+                    </div>
                 </form>
-            </table>
-        </>
+            </div>
+        </div>
-    );
+    )
 }
 ```
+```App.js
+import React, { Component } from 'react';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import Top from './components/Top';
+import Content from './components/Content';
+class App extends Component {
+    constructor(props) {
+        super(props);
+    }
+    componentDidMount() {
+        const id = 1
+        const name = "name"
+        this.props.didMnt(id,name);
+    }
+    onChangeId = (e) => {
+        this.props.updateFormId(e.target.value);
+    }
+    // forName
+    onChangeName = (e) => {
+        this.props.updateFormName(e.target.value);
+    }
+    onSaveItem = () => {
+        console.log("SAVE_ID: ",this.props.conditions.id);
+        console.log("SAVE_NAME: ",this.props.conditions.name);
+    }
+    componentDidMount() {
+        (async () => {
+            const test = "test"
+            this.props.didMnt(test);
+        })();
+    }
+    render() {
+        console.log('App.render:', this.props);
+        const data1 = "AAAA";
+        const data2 = "data2";
+        const topData = ({data1}) => ({data1})
+        const contentData = ({data2}) => ({data2})
+        const ja = "*****Japan!";
+        const formItem = this.props
+        // formEvent
+		const contentHandler = ({onChangeId, onChangeName}) => ({onChangeId, onChangeName})
+        return (
+            <div className="content">
+                <Header />
+                    sample site
+                <div className="row">
+                    <div className="col-3">
+                        <h1>{ja}</h1>
+                    </div>
+                    <div className="col-5">
+                        <p>test</p>
+                    </div>
+                </div>
+                <Top data1={data1} />
+                <br />
+                <br />
+                <br />
+                <div className="container">
+                <Content formItem={formItem} {...contentHandler(this)}/>
+                </div>
+                <br />
+                <br />
+                <br />
+            </div>
+        );
+    }
+}
+export default App;
+```

エラー文追加

2020/12/07 17:26

投稿

yuki-o0413

スコア8

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -4,7 +4,15 @@
+エラー内容
+「';' が必要です。ts(1005)」
+→セミコロンをつけてもエラーは解決できませんでした
-React、JavaScript初心者です。改善点、アプローチの方法、アドバイスいただけたらありがたいです。お願いします。
+React、JavaScript初心者です。改善点、問題解決のためのアプローチの方法、アドバイスいただけたらありがたいです。お願いします。