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

Posted 2023-02-22

【中文标题】在 .map() 函数中时，react 中的组件不呈现

【英文标题】：Component in react doesn't render when in .map() function

【发布时间】：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() 方法似乎很奇怪 - 我希望您会使用商店从生命周期挂钩中更新状态。 （但是，如果他们在教程中这样做，他们比我聪明，我相信它）

你也可以显示任务组件吗？

【参考方案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() 函数生成的组件重新渲染。如果有人知道为什么会这样，我很想听听！