Javascript React：使用映射循环添加新元素列表

在提交类似于待办事项列表的表单后，我正在尝试向作业列表页面添加更多列表。实际发生的情况是，它将抛出undefined的

无法读取属性'length'错误，如果我删除了映射循环，那么页面将工作，但我将无法添加其他列表。有没有一种方法可以使用map循环或其他方法添加新列表？谢谢

myjoblist.js文件：

const NewList = ({ onSubmitList }) => {
  const { inputs, handleInputChange, handleSubmit } = CustomForm(onSubmitList);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <h3>Create a new job list</h3>
        <input
          placeholder="Position title"
          name="positionTitle"
          type="text"
          onChange={handleInputChange}
          value={inputs.positionTitle || ""}
        />
        <input
          placeholder="Company name"
          name="companyName"
          onChange={handleInputChange}
          value={inputs.companyName || ""}
        />
        <input
          placeholder="Job link"
          name="jobLink"
          onChange={handleInputChange}
          value={inputs.jobLink || ""}
        />
        <button type="submit">Create list</button>
      </form>
    </div>
  );
};


constmyjoblist=（{inputs，joblists}）=>(
{joblists.length>0&&
joblists.map（joblist=>
我的工作清单
{inputs.positionTitle}
{inputs.companyName}





)}
);

newlist.js文件：

const NewList = ({ onSubmitList }) => {
  const { inputs, handleInputChange, handleSubmit } = CustomForm(onSubmitList);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <h3>Create a new job list</h3>
        <input
          placeholder="Position title"
          name="positionTitle"
          type="text"
          onChange={handleInputChange}
          value={inputs.positionTitle || ""}
        />
        <input
          placeholder="Company name"
          name="companyName"
          onChange={handleInputChange}
          value={inputs.companyName || ""}
        />
        <input
          placeholder="Job link"
          name="jobLink"
          onChange={handleInputChange}
          value={inputs.jobLink || ""}
        />
        <button type="submit">Create list</button>
      </form>
    </div>
  );
};


以下是迷你项目的链接：

更新：添加了更多可能相关的文件源。
请尝试以下操作：

const MyJobList = ({ inputs, joblists }) => (
  <div>
    {joblists && joblists.length > 0 && 
      joblists.map(joblist => <div key={joblist.id}>
        <h3>My Job List </h3>
        <h3>{inputs.positionTitle}</h3>
        <p>{inputs.companyName}</p>
        <a href={inputs.jobLink}>{inputs.jobLink}</a>
        <br />
        <br />
      <CurrentDate />
    </div>)}
  </div>

constmyjoblist=（{inputs，joblists}）=>(
{joblists&&joblists.length>0&&
joblists.map（joblist=>
我的工作清单
{inputs.positionTitle}
{inputs.companyName}





)}

作业列表最初可能未初始化为数组。初始渲染即可。单击“创建列表”按钮时，长度将引发错误，然后仅显示“作业列表”由于映射时未定义的
未正确设置
。因此，请检查
作业列表和&joblists.length>0和&joblists.map
。好的，我在
作业列表和&joblists.length>0和&joblists.map
旁边添加了
作业列表和&code>。不幸的是，它没有解决问题在我提交了新列表后，没有呈现元素。但错误消息确实消失了，这就是进度。您希望您的
Navbar
组件将收到
joblists
道具，但当您在
App.js
上使用
Navbar
时，您没有通过
joblists
。我尝试了。错误消息消失了d、 但是，新列表没有呈现：（你能在更新工作列表的地方显示代码吗？只是更新了问题以包含更多的文件。你可能指的是
newlist.js
文件，对吗？这就是我添加新工作列表的地方。