我正在尝试使用 React 创建一个任务管理器。我在提交任务后显示任务时遇到问题

Question

我创建了 MyForm 组件，我使用状态来跟踪 formData，提交的任务的另一个状态，以及 isSubscribed 的另一个任务，我认为我不再需要它。 MyForm 似乎工作正常，当我调用 Task 组件时，我认为问题出在哪里。在任务组件中，我尝试以卡片形式返回一个显示任务的任务。我还没有研究我的 css，因为我想先弄清楚逻辑以确保一切正常。

我尝试了几件事，首先我认为这可能是我调用组件并在 MyForm 中传递道具的方式，但我搜索了谷歌，我真的相信它是正确的。我首先尝试通过它进行映射：{tasks.map((task)=>{})}

我遇到了“未定义对象”的问题，所以我只是定期调用它。相反，我返回并通过 Task.jsx 中的任务进行映射。我确信我做错了什么，但是开发工具不会返回任何错误，而且我自己也没有看到任何错误。仍在学习 React，所以我确信它是愚蠢的。已经找了好几个小时了，但似乎找不到。我看到了可以复制的其他形式，但我正在努力学习，并希望看到我做错了什么。 任务 我的表格

这也是我的 GitHub，以防您需要完整代码。

Answer 1

您的

Task

组件的地图函数不会返回任何内容。您需要返回正在生成的 JSX。在 if 语句之外还应该有一个

return null

。

   {tasks.map((t, index) => {
      if (t) {
        // wrap in return
        return (
          <div className="taskWrapper" key={index}>
            <div className="front">
              <h1>Title: {t.title}</h1>
            </div>
            <div className="back">
              <h2>Due Date: {t.dueDate}</h2>
              <h2>Priority: {t.priority}</h2>
              <h2>Status: {t.status}</h2>
              <h2>Description: {t.description}</h2>
            </div>
          </div>
        );
      }

      return null; // return null when if case fails
    })}