Javascript 对要映射的属性进行响应

我试图将我的mega类转换成更小的可重用组件，但是，我一直在传递要映射的道具名称。第一个代码块是我的mega类，我试图将其分解为第二个代码块中显示的较小组件，但在第二个代码块中尝试使用props.categoryName.map时出现错误。我还应该怎么做

// Sort todos by due date. Completed todos get moved to completed list.
    let today = todos.filter(todo => todo.date === "today" && !todo.complete)
    let completedTodos = todos.filter(todo => todo.complete)

    return (
        <div className="td-app">
            <TodoForm onSubmit={this.addTodo}/>

            {/* <Category categoryName="today"/> */}

            <div className="td-section">
                <div className="td-category">
                    <h2 className="today">Today</h2>
                    
                    <p className="td-count">{todayTodos.length} todos</p>
                </div>
                <div className="td-list">
                        {todayTodos.map(todo => (
                                <Todo 
                                    key={todo.id} 
                                    toggleComplete={() => this.toggleComplete(todo.id)} 
                                    onDelete={() => this.handleDeleteTodo(todo.id)}
                                    todo={todo}
                                />
                        ))}
                </div>
            </div>

//按到期日对待办事项进行排序。已完成的待办事项移动到已完成列表。
let today=todos.filter（todo=>todo.date==“today”&&！todo.complete）
让completedTodos=todos.filter（todo=>todo.complete）
返回(
{/*  */}
今天
{todayTodos.length}todos
{todayTodos.map（todo=>(
this.toggleComplete（todo.id）}
onDelete={（）=>this.handleDeleteTodo（todo.id）}
todo={todo}
/>
))}

我的组件类在这里：

import React from 'react'
import Todo from './Todo'

const Category = (props) => (
    <div className="td-section">
        <div className="td-category">
            <h2 className={props.categoryName}>{props.categoryName}</h2>
            
            <p className="td-count">{props.categoryName.length} todos</p>
        </div>
        <div className="td-list">
                {props.categoryName.map(todo => (
                        <Todo 
                            key={todo.id} 
                            toggleComplete={() => this.toggleComplete(todo.id)} 
                            onDelete={() => this.handleDeleteTodo(todo.id)}
                            todo={todo}
                        />
                ))}
        </div>
    </div>
)
export default Category

从“React”导入React
从“./Todo”导入Todo
常量类别=（道具）=>(
{props.categoryName}
{props.categoryName.length}todos
{props.categoryName.map（todo=>(
this.toggleComplete（todo.id）}
onDelete={（）=>this.handleDeleteTodo（todo.id）}
todo={todo}
/>
))}
)
导出默认类别

您将

categoryName

作为字符串literal

“today”

传递。因为这显然不是

TODO的数组，所以您不能调用
.map（）
在它上面。如果您还想在
类别
组件中映射TODO，您还必须传递TODO。请注意，您实际上必须将列表作为道具传递，而不是包含它的变量名称的字符串：

<Category 
    categoryName="today" 
    todos={today} 
    onComplete={this.toggleComplete} 
    onDelete={this.handleDeleteTodo}
/>

您将
categoryName
作为字符串literal
“today”
传递。因为这显然不是
TODO的数组，所以无法调用
.map（）
在它上面。如果您还想在
类别
组件中映射TODO，您还必须传递TODO。请注意，您实际上必须将列表作为道具传递，而不是包含它的变量名称的字符串：

<Category 
    categoryName="today" 
    todos={today} 
    onComplete={this.toggleComplete} 
    onDelete={this.handleDeleteTodo}
/>

错误是什么？看起来
categoryName
是一个字符串（
categoryName=“today”
）。不能映射字符串，只能映射数组。这是数组的正确映射。[]错误是什么？看起来
categoryName
是一个字符串（
categoryName=“today”
）。无法映射字符串，只能映射数组。这是正确的映射用于数组。[]谢谢，这解决了我原来的问题。但是，我得到了：this.toggleComplete（todo.id），toggleComplete现在未定义。我如何修复此问题？toggleComplete是我的mega类中的一个方法。我是否也将其作为道具传递？或者是否有更优雅的方法？@Brian您也可以将回调函数作为道具传递。请参阅我的更新答案。谢谢，这修复了我原来的问题。但是，我得到了：this.toggleComplete（todo.id），toggleComplete现在未定义。我如何修复此问题？toggleComplete是我的mega类中的一个方法。我是否也将它们作为道具传入？或者是否有更优雅的方法？@Brian您也可以将回调函数作为道具传入。请参阅我的更新答案。