Javascript ReactJS TypeError:无法读取属性'；地图'；未定义的

我哪里出错了？。我一直在遵循一个教程，但它总是给我这个错误<代码>类型错误：无法读取未定义的属性“映射”。什么会导致道具变得不明确。 这是我的密码：

var todoItems = [];
todoItems.push({index: 1, value: "learn react", done: false});
todoItems.push({index: 2, value: "Go shopping", done: true});
todoItems.push({index: 3, value: "buy flowers", done: true});

class TodoList extends React.Component {
    render () {
        var items = this.props.items.map((item, index) => {
                return (
            <TodoListItem key={index} item={item} index={index} removeItem={this.props.removeItem} markTodoDone={this.props.markTodoDone} />
    );
    });
        return (
            <ul className="list-group"> {items} </ul>
    );
    }
}

class TodoListItem extends React.Component {
    constructor(props) {
        super(props);
        this.onClickClose = this.onClickClose.bind(this);
        this.onClickDone = this.onClickDone.bind(this);
    }
    onClickClose() {
        var index = parseInt(this.props.index);
        this.props.removeItem(index);
    }
    onClickDone() {
        var index = parseInt(this.props.index);
        this.props.markTodoDone(index);
    }
    render () {
        var todoClass = this.props.item.done ?
            "done" : "undone";
        return(
            <li className="list-group-item ">
            <div className={todoClass}>
            <span className="glyphicon glyphicon-ok icon" aria-hidden="true" onClick={this.onClickDone}></span>
        {this.props.item.value}
    <button type="button" className="close" onClick={this.onClickClose}>&times;</button>
        </div>
        </li>
    );
    }
}

class TodoForm extends React.Component {
    constructor(props) {
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }
    componentDidMount() {
        this.refs.itemName.focus();
    }
    onSubmit(event) {
        event.preventDefault();
        var newItemValue = this.refs.itemName.value;

        if(newItemValue) {
            this.props.addItem({newItemValue});
            this.refs.form.reset();
        }
    }
    render () {
        return (
            <form ref="form" onSubmit={this.onSubmit} className="form-inline">
            <input type="text" ref="itemName" className="form-control" placeholder="add a new todo..."/>
            <button type="submit" className="btn btn-default">Add</button>
            </form>
    );
    }
}

class TodoHeader extends React.Component {
    render () {
        return <h1>Todo list</h1>;
    }
}

export default class TodoApp extends React.Component {
    constructor (props) {
        super(props);
        this.addItem = this.addItem.bind(this);
        this.removeItem = this.removeItem.bind(this);
        this.markTodoDone = this.markTodoDone.bind(this);
        this.state = {todoItems: todoItems};
    }
    addItem(todoItem) {
        todoItems.unshift({
            index: todoItems.length+1,
            value: todoItem.newItemValue,
            done: false
        });
        this.setState({todoItems: todoItems});
    }
    removeItem (itemIndex) {
        todoItems.splice(itemIndex, 1);
        this.setState({todoItems: todoItems});
    }
    markTodoDone(itemIndex) {
        var todo = todoItems[itemIndex];
        todoItems.splice(itemIndex, 1);
        todo.done = !todo.done;
        todo.done ? todoItems.push(todo) : todoItems.unshift(todo);
        this.setState({todoItems: todoItems});
    }
    render() {
        return (
            <div id="main">
            <TodoHeader />
            <TodoList items={this.props.initItems} removeItem={this.removeItem} markTodoDone={this.markTodoDone}/>
    <TodoForm addItem={this.addItem} />
    </div>
    );
    }
}

var todoItems=[]；
push（{index:1，值：“learn react”，done:false}）；
push（{index:2，值：“Go shopping”，done:true}）；
push（{index:3，value:“buy flowers”，done:true}）；
类TodoList扩展了React.Component{
渲染（）{
var items=this.props.items.map（（项目，索引）=>{
返回(
);
});
返回(
{items}
);
}
}
类TodoListItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onClickClose=this.onClickClose.bind（this）；
this.onClickDone=this.onClickDone.bind（this）；
}
onClickClose（）{
var index=parseInt（this.props.index）；
此.props.removietem（索引）；
}
onClickDone（）{
var index=parseInt（this.props.index）；
这个.props.marktodone（索引）；
}
渲染（）{
var todoClass=this.props.item.done？
“完成”：“撤消”；
返回(

{this.props.item.value}
&时代；

);
}
}
类TodoForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onSubmit=this.onSubmit.bind（this）；
}
componentDidMount（）{
this.refs.itemName.focus（）；
}
提交（事件）{
event.preventDefault（）；
var newItemValue=this.refs.itemName.value；
if（newItemValue）{
this.props.addItem（{newItemValue}）；
this.refs.form.reset（）；
}
}
渲染（）{
返回(
添加
);
}
}
类TodoHeader扩展了React.Component{
渲染（）{
返回待办事项列表；
}
}
将默认类导出到DoApp扩展React.Component{
建造师（道具）{
超级（道具）；
this.addItem=this.addItem.bind（this）；
this.removietem=this.removietem.bind（this）；
this.marktodone=this.marktodone.bind（this）；
this.state={todoItems:todoItems}；
}
附加项（todoItem）{
取消移位({
索引：todoItems.length+1，
值：todoItem.newItemValue，
完成：错误
});
this.setState（{todoItems:todoItems}）；
}
removeItem（项目索引）{
todoItems.拼接（itemIndex，1）；
this.setState（{todoItems:todoItems}）；
}
markTodoDone（项目索引）{
var todo=todoItems[itemIndex]；
todoItems.拼接（itemIndex，1）；
todo.done=！todo.done；
todo.done？todoItems.push（todo）：todoItems.unshift（todo）；
this.setState（{todoItems:todoItems}）；
}
render（）{
返回(
);
}
}

---

它总是指向

var items=this.props.items.map（（item，index）=>…

。我不认为教程有错误。我还是React新手。

教程没有问题，但您遗漏了一部分， 检查最后一行：

ReactDOM.render(<TodoApp initItems={todoItems}/>, ....);

其他解决方案：

不是将数据定义到此文件中，而是在导入TodoApp并呈现它的位置定义它，然后从该位置传递数据，它将起作用

像这样：

import TodoApp from '/path_to_todoapp/';

var todoItems = [];
todoItems.push({index: 1, value: "learn react", done: false});
todoItems.push({index: 2, value: "Go shopping", done: true});
todoItems.push({index: 3, value: "buy flowers", done: true});

ReactDOM.render(<TodoApp initItems={todoItems}/>, document.getElementById('app'));

import TodoApp from'/path_to_TodoApp/'；
var todoItems=[]；
push（{index:1，值：“learn react”，done:false}）；
push（{index:2，值：“Go shopping”，done:true}）；
push（{index:3，value:“buy flowers”，done:true}）；
ReactDOM.render（，document.getElementById（'app'））；

更新：

---

使用

ReactDOM.render

，检查此答案以了解更多详细信息：

它给了我此错误：TypeError:\uu网页包\u导入的\u模块\u 0\u react\uuu默认值。a.render不是一个函数

import TodoApp from '/path_to_todoapp/';

var todoItems = [];
todoItems.push({index: 1, value: "learn react", done: false});
todoItems.push({index: 2, value: "Go shopping", done: true});
todoItems.push({index: 3, value: "buy flowers", done: true});

ReactDOM.render(<TodoApp initItems={todoItems}/>, document.getElementById('app'));