向子组件分两次传递props时出现map undefined错误求助

你遇到的map undefined错误，核心原因是你渲染了两个独立的<Todo>组件，其中第二个组件没有接收到todo这个必要的props。

咱们一步步拆解：

• 第一次渲染<Todo todo={this.state.todos} />：这个组件的this.props.todo是你state里的数组，所以map方法能正常执行，没问题。
• 第二次渲染<Todo deletTodo={this.deletTodo}/>：这个组件的props里只有deletTodo，完全没有todo属性，所以this.props.todo的值是undefined。而undefined是没有map方法的，自然就抛出错误了。

而你把props合并传递的时候，只渲染了一个<Todo>组件，同时把todo和deletTodo都传了过去，这时候组件里的this.props.todo是存在的数组，map就能正常工作了。

正确的写法应该是这样的： #

在App.js里只渲染一次<Todo>组件，同时传递所有需要的props：

import React, { Component } from 'react'
import Todo from './Todo';
export default class App extends Component {
 state = {
 todos: [
 {id : 1 , content: "lets sleep"},
 {id: 2, content:"lets eat "}
 ]}
 deletTodo = (id) => {
 console.log(id)
 }
 render() {
 return (
 <div className="App container">
 <h1 className="center blue-text">Todo's</h1>
 {/* 只渲染一次Todo组件，传递所有需要的props */}
 <Todo todo={this.state.todos} deletTodo={this.deletTodo} />
 </div>
 )
 }
}

另外，你的Todo组件目前还没用到deletTodo，之后如果要添加删除功能，直接用this.props.deletTodo(td.id)就行，比如给每个todo项加个删除按钮：

import React, { Component } from 'react'
export default class Todo extends Component {
 render() {
 return (
 <div className= "todos collection">
 { this.props.todo.map((td)=>{
 return (
 <div className="collection-item" key={td.id} >
 <span>{td.content}</span>
 {/* 添加删除按钮，调用props里的deletTodo方法 */}
 <button onClick={() => this.props.deletTodo(td.id)} className="right btn red">Delete</button>
 </div>
 )})}
 </div>
 )
 }
}

内容的提问来源于stack exchange，提问作者mdvenkatesh nuhk