###前提・実現したいこと
連想配列のテンプレートに新しいデータを代入し、代入後のデータを配列の中にpushする
↓
その連想配列を元にReactで定義したテンプレートにデータを当てて描画する
###発生している問題
配列内すべての要素に同じデータが入っていることになり、すでに描画されたデータも入力した値に書き換わってしまいます
###該当のソースコード
javascript
1var cnt = 0; 2var content = { 3 link : "", 4 title : "", 5 id : 0, 6 time : "" 7}; 8var contentsList = []; 9var test = () => { 10 content['title'] = document.querySelector('#input1').value; 11 content['link'] = document.querySelector('#input2').value; 12 content['id'] = cnt++; 13// 作ったデータをプッシュする 14 contentsList.push(content); 15// 描画する 16 ReactDOM.render( 17 <ContentsList contentsList={contentsList} />, 18 document.querySelector('#container') 19 ); 20} 21 22const ContentsList = props => { //コンテンツリストコンポーネント定義 23 return( 24 <ul className="contents"> 25 { 26 props.contentsList.map((content, index) => {<Content content={content} index={index} />}); 27 } 28 </ul> 29 ) 30} 31 32const Content = props => { //コンテンツコンポーネント定義 33 var content = props.content; 34 return ( 35 <li id={"content_" + (props.index)} className="content"> 36 <ContentLink link={content.link} index={props.index} /> 37 <br /> 38 <ContentTitle title={content.title} index={props.index} /> 39 <ContentTime time={props.time} index={props.index} /> 40 <ContentNumber index={props.index} /> 41 </li> 42 ); 43} 44 45// それ以下のコンポーネントは省略します 46
###試したこと
- console.logでcontentListの要素のなかみを確認しましたが、すべて同じid,titleで、inputから新たにデータを入力するたびにすべての要素が同じ値になっていました。
###補足情報(言語/FW/ツール等のバージョンなど)
html
1 2<script type="text/javascript" src="https://fb.me/JSXTransformer-0.13.3.js"></script> 3<script type="text/javascript" src="https://fb.me/react-15.1.0.js"></script> 4<script type="text/javascript" src="https://fb.me/react-dom-15.1.0.js"></script> 5<script type="text/jsx" src="./main2.jsx"></script>
使っているReactのバージョンです
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/08 10:18