以意想不到的方式渲染反应组件

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

使用以下语法呈现列表

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

这能回答你的问题吗？