以意想不到的方式呈現反應組分

Question

我是新來的反應。我正在嘗試使用store2.js庫創建一個簡單的todolist。在渲染列表中的元素時出現問題。

var React = require('react'); 
var store = require("store2"); 
import {Button} from "react-bootstrap"; 
class CreateToDoList extends React.Component { 
    componentDidMount() { 
    this.inputVal=""; 
    } 
    constructor() { 
    super(); 
     this.addValueToList = this.addValueToList.bind(this); 
     this.handleInput=this.handleInput.bind(this); 
    }; 
    handleInput(e) 
    { 
    this.inputValue=e.target.value; 
    } 
addValueToList(){ 
    if(store.has("todoList")===false) 
    { 
    store.set("todoList",{count:0}) 
    } 
    var count=store.get("todoList").count; 
    count+=1; 
    var obj={ 
     value:this.inputValue, 
     isChecked:false 
    }; 
    store.transact("todoList",function(elements){ 
     elements[count+""]=obj; 
     elements.count=count 
    });console.log(store.getAll("todoList"));debugger; 
    } 
    render() { 
    return (<div> 
     <input type="input" onChange={this.handleInput}/> 
     <Button bsStyle="primary" onClick={this.addValueToList}>Add</Button> 
     <CreateShowPreviousTasks/> 
     </div> 
    ) 
    } 
} 
class todoValues extends React.Component{ 
    componentDidMount(){ 
    this.handleClick=this.handleClick.bind(this); 
    } 
    handleClick(){ 
    } 
    render(){ 
    console.log(this.props) 
     return(
     <div > 
      <input type="checkbox" checked={this.props.isCheck}></input> 
      <input type="input">{this.prop.value}</input> 
     </div> 
    ) 
    } 
} 
class CreateShowPreviousTasks extends React.Component { 
    componentDidMount() { 
    console.log("here") 
    } 
    constructor(){ 
    super(); 
    this.handleClick=this.handleClick.bind(this); 
    } 
    handleClick(event) 
    { 
    } 
    render() { 
    if (store.has('todoList') !== undefined) { 
     var divElements=[]; 
     this.loop=0; 
     var count=store.get("todoList").count; 
     for(this.loop=0;this.loop<count;this.loop++) 
     { 
     var obj=store.get("todoList"); 
     obj=obj[count+""]; 
     divElements.push(
     <todoValues value={obj.value} key={this.loop+1}/> 
     ) 
     } 
    } else { 
     store.set('todoList',{ 
     count:0 
     }) 
    } 
    return (<div>{divElements}</div> 
    ) 
    } 
} 
export default CreateToDoList; 

todoValues類增加了div中包含的兩個輸入按鈕的div元素。但是渲染只能以<todovalues value="as"></todovalues>完成。
類CreateShowPreviousTasks它檢索本地存儲項目中存儲的項目列表，並將這些值作爲屬性傳遞給todoValues並作爲div封裝。

Answer 1

使用folliwng語法渲染列表

render() { 
    let todos = store.get("todolist"); 

    return (
    <div> 
    { 
     Object.keys(todos).map(function(key){ 
      let todo = todos[key]; 
      return (<todoValues value={ todo.value } key={ key }/>) 
     }) 
    } 
    </div> 
} 

這是否回答你的問題？