在 .map() 函数中时，react 中的组件不呈现答案

【问题标题】：Component in react doesn't render when in .map() function在 .map() 函数中时，react 中的组件不呈现
【发布时间】：2018-01-08 18:53:20
【问题描述】：

我一直在学习 react 和 redux 以开发 Web 应用程序（使用 Dan 和 Joe 的 egghead.io 课程），即使多次观看课程，我似乎也无法开始工作

我基本上是在尝试使用 .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() 中工作但不渲染组件？

编辑：完整的 TaskManager 组件：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>
    )
};

【问题讨论】：

你能发布你完整的渲染方法吗？
给你gist.github.com/Kylar13/6e9b58852f22b64fe5281ed905bf2bc4 也将其添加到问题中
请记住，Array.map() 返回一个 new 数组，其中包含回调函数的所有结果。如果您的地图功能正在运行但没有渲染任何东西，我猜它不在您的渲染功能的返回（...）部分
@kylar13 你是对的，在我看到你的要点之前我已经输入了。您是否尝试过使用 Chrome 开发工具的 React 扩展来检查您的应用程序？它会让你看到每个组件的状态和道具是什么。此外，在您的渲染函数中调用 .getState() 方法似乎很奇怪 - 我希望您会使用商店从生命周期挂钩中更新状态。（但是，如果他们在教程中这样做，他们比我聪明，我相信它）
你也可以显示任务组件吗？

标签： javascript arrays reactjs redux react-redux

【解决方案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 })}

【讨论】：

当我直接调用函数时，React 抱怨数组迭代器中的孩子没有键。 “数组或迭代器中的每个孩子都应该有一个唯一的“键”道具。”
然后尝试将其添加到Task函数中
Task函数内部不起作用，map()函数中渲染的组件是需要“key”道具的组件：facebook.github.io/react/docs/lists-and-keys.html
docs 还说你必须用一个单独的容器 (div) 包装它，例如：
{TaskManagerStore.getState().tasks.map(task => )}
它已经在第一次编辑中链接的完整代码中的 div 中，很抱歉没有在截图中说明这一点

【解决方案2】：

在您的任务组件中，您传递了两个道具，键和任务。我通过添加一个直接引用状态树的附加道具解决了这个问题，就像这样......

const tasks = TaskManagerStore.getState().tasks

{tasks.map(task =>
    <Task 
      key={task.id} 
      task={task} 
      tasks={tasks}/>
)}

这当然不是一个优雅的解决方案，但由于某种原因，我无法在不直接引用状态的情况下让 .map() 函数生成的组件重新渲染。如果有人知道为什么会这样，我很想听听！

【讨论】：