Question

我一直在学习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>
    )
};

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 })}

Answer 2

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

const tasks = TaskManagerStore.getState().tasks

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

它当然不是一个优雅的解决方案，但出于某种原因，我无法通过.map（）函数生成的组件重新渲染而无需直接引用状态。如果有人知道为什么会这样，我很乐意听到它！

在.map（）函数

2 个答案: