我们如何访问未定义的对象？

Question

[我正在尝试在ReactJS中创建一个简单的Todo列表，而代码正在运行，但是我在理解几段代码时遇到了麻烦。

我的应用程序由3个组件组成：

1. index.js-应用程序的入口点。
2. TodoList.js-呈现表单，按钮和TodoItem.js组件
3. TodoItem.js-映射到输入文本并显示该列表的实际列表。

我的T​​odoList.js组件：

import React, { Component } from "react";
import TodoItems from "./TodoItems";

class TodoList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: []
    };

    this.addItem = this.addItem.bind(this);
  }

  addItem(e) {
    if (this._inputElement.value !== "") {
      var newItem = {
        text: this._inputElement.value,
        key: Date.now()
      };

      this.setState(prevState => {
        return {
          items: prevState.items.concat(newItem)
        };
      });
    }
    //console.log(this._inputElement.value);
    this._inputElement.value = "";
    e.preventDefault();
  }
  render() {
    return (
      <div className="todoListMain">
        <div className="header">
          <form onSubmit={this.addItem}>
            <input
              ref={a => (this._inputElement = a)}
              placeholder="enter task"
            ></input>
            <button type="submit">add</button>
          </form>
        </div>
        <TodoItems entries={this.state.items} />
      </div>
    );
  }
}

export default TodoList;

TodoItems.js组件：

import React, { Component } from "react";

class TodoItems extends Component {
  createTasks(itemmm) {
    return <li key={itemmm.key}>{itemmm.text}</li>;
  }

  render() {
    var todoEntries = this.props.entries;
    var listItems = this.props.entries.map(this.createTasks);
    // console.log(this.props.entries);
    return <ul className="theList">{listItems}</ul>;
  }
}

export default TodoItems;

是什么问题？1）我很难理解return <li key={itemmm.key}>{itemmm.text}</li>;有效，因为“ itemmm”是我已经传递的随机参数，“ itemmm.text”如何正确显示文本，根据我的理解，“ itemmm”是一个模糊的对象，我在任何地方都没有定义。

2]我的“ TodoList.js”组件中<TodoItems entries={this.state.items} />行代码的重要性。到目前为止，我了解它正在使用道具动态输入值。但是如何修改TodoItem.js组件？

感谢您阅读，抱歉，这是一个太基本的问题。任何帮助将不胜感激。

Answer 1

1。了解“ itemmm”是一个模糊的对象

createTasks(itemmm) {
    return <li key={itemmm.key}>{itemmm.text}</li>;
  }

编辑：关于key和text

var newItem = {
        text: this._inputElement.value,
        key: Date.now()
      };

      this.setState(prevState => {
        return {
          items: prevState.items.concat(newItem)
        };
      });

逻辑从这里开始。

您获得items为[{key:23213123, text:'xyz'}]

var listItems = this.props.entries.map(this.createTasks);

这里itemmm是参数，您可以使用任何名称进行定义。

2. 项目作为道具传递到TodoItems至entries中。

Answer 2

Abhinav，您将项目作为道具传递给条目，并且当您在数组上映射时，有一个回调函数createTask。

createTasks(itemmm) {
    return <li key={itemmm.key}>{itemmm.text}</li>;
 }

上面的函数是下面代码的map方法的回调

this.props.entries.map(createTasks);

这是我在下面指定的相同内容。

this.props.entries.map((itemmm)=>{
  return <li key={itemmm.key}>{itemmm.text}</li>;
});