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

Question

我正在尝试在ReactJS中创建一个简单的待办事项列表，而代码正在工作，但我无法理解几段代码。

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

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

我的待办事项列表.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>;
});