Rendering von Reaktionskomponenten in unerwarteter Weise

Question

Ich bin neu zu reagieren. Ich versuche mit der store2.js-Bibliothek einen einfachen Todolisten zu erstellen. Beim Rendern der Elemente in der Aufgabenliste ist ein Problem aufgetreten.

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; 

Die Klasse todoValues fügt die div-Elemente von zwei Eingabetasten in einem div gewickelt. Aber das Rendering erfolgt nur als <todovalues value="as"></todovalues>.
Die Klasse CreateShowPreviousTasks, die die Liste der gespeicherten Elemente in den lokalen Speicherelementen abruft und diese Werte als Eigenschaften an todoValues übergibt und wie in einem div umschließt.

Answer 1

verwenden, um die folliwng Syntax, um eine Liste

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> 
} 

Enthält diese Antwort auf Ihre Frage zu machen?