javascript - 在 .map() 函数中时，react 中的组件不会渲染

Question

我一直在学习 React 和 Redux 来开发 Web 应用程序(使用 Dan 和 Joe 的 Egghead.io 类(class))，但有些东西即使在多次观看类(class)后我似乎也无法工作

我基本上尝试使用 .map() 函数渲染一个项目数组，但没有渲染任何内容，我在之后立即映射该数组以检查是否以正确的状态触发了重新渲染，确实如此。这是有问题的代码:

{TaskManagerStore.getState().tasks.map(task =>
    <Task key={task.id} task={task} />
)}
{TaskManagerStore.getState().tasks.map( task =>
    console.log(task)
)}

<AddTaskButton onClick={() => (
    TaskManagerStore.dispatch({
        type: 'ADD_TASK',
        title: 'Test task',
        content: 'Hey there!',
        id: testID++
    })
)}/>

控制台日志打印数组中的所有项目(首先什么都没有，然后是 0，然后是 [0, 1] 等)，但组件没有被渲染。我已将控制台日志放入组件的渲染方法中，但它永远不会被调用

console.log 如何在 .map() 中工作但不渲染组件？

编辑:完整的任务管理器组件:https://gist.github.com/Kylar13/6e9b58852f22b64fe5281ed905bf2bc4

编辑2:任务组件:

const Task = ({ task }) => {

    return (
        <div className="Task">
            <h3 className="Task-title">{task.title}</h3>
            <p className="Task-content">{task.content}</p>
            <div className="Task-editButton">Edit<i className="fa fa-pencil" aria-hidden="true"/></div>
        </div>
    )
};

Answer 1

也许您只需将 Task 作为函数调用，例如:

const Task = ({ task }) => {

    return (
        <div key={task.id} className="Task">
            <h3 className="Task-title">{task.title}</h3>
            <p className="Task-content">{task.content}</p>
            <div className="Task-editButton">Edit<i className="fa fa-pencil" aria-hidden="true"/></div>
        </div>
    )
};

{TaskManagerStore.getState().tasks.map(task => Task({ task })}