Javascript 未渲染到React钩子中其他组件的输入值

我正在通过使用挂钩构建输入表单来练习React道具。想法是当我在NewList组件中输入输入并单击submit按钮时，它的值将以HTML元素的形式呈现在MyJobList组件上。问题是当我提交表单时，网页上没有显示任何内容。可能是我传递的数据不正确

这是我的密码。我将其最小化，以突出可能出现的问题，并在下面提供了完整代码的链接：

newlist.js

constnewlist=（）=>{
const[inputState，setInputState]=useState（{}）；
const onSubmitList=（）=>{
设置输入状态({
positionTitle:`${inputs.positionTitle}`，
companyName:`${inputs.companyName}`，
jobLink:`${inputs.jobLink}`
});
};
const{inputs，handleInputChange，handleSubmit}=CustomForm（onSubmitList）；

myjoblist.js

constmyjoblist=输入=>(
{inputs.positionTitle}
{inputs.companyName}

{inputs.jobLink}

);

navbar.js

const Navbar=inputState=>(
);

非常感谢您的帮助和指导

---

这里有一个完整代码的链接：

因此，您需要持久化状态才能生活在共享父组件中，在现有组件中，您可以选择App.js或navbar.js（另请注意，您应该使用组件文件名，即navbar.js）。理想情况下，您应该创建一个保存状态的共享容器。当您离开newlist组件查看myjoblist时，newlist组件将卸载，并且您将丢失状态。对于共享父组件，父组件在呈现其子组件（newlist&myjoblist）时不会卸载

另一个问题是，您正在将回调传递给自定义挂钩，但回调没有任何参数。在句柄单击中，您需要将输入传递给它。在将输入传递给回调之前，您也不能将状态设置为空字符串，请在传递完后执行

const handleSubmit = event => {
  e.preventDefault()
  callback(inputs)
  setInputs({}) // set it back to the default state, not a string
}

最后，navbar中的

inputState

是一个未定义的变量。您在应用程序中呈现navbar，并且没有向其传递任何道具。react中功能组件的第一个参数是道具。因此，即使您传递它的状态，您也需要通过

props.inputState

或通过解构进行提取

下面是一个仍然可以使用一些清理的工作示例：

---

因此，您需要持久化状态才能生活在共享父组件中，在现有组件中，您可以选择App.js或navbar.js（旁注，您应该使用组件文件名，即navbar.js）。理想情况下，您应该创建一个保存状态的共享容器。当您离开newlist组件查看myjoblist时，newlist组件将卸载，并且您将丢失状态。对于共享父组件，父组件在呈现其子组件（newlist&myjoblist）时不会卸载

另一个问题是，您正在将回调传递给自定义挂钩，但回调没有任何参数。在句柄单击中，您需要将输入传递给它。在将输入传递给回调之前，您也不能将状态设置为空字符串，请在传递完后执行

const handleSubmit = event => {
  e.preventDefault()
  callback(inputs)
  setInputs({}) // set it back to the default state, not a string
}

最后，navbar中的

inputState

是一个未定义的变量。您在应用程序中呈现navbar，并且没有向其传递任何道具。react中功能组件的第一个参数是道具。因此，即使您传递它的状态，您也需要通过

props.inputState

或通过解构进行提取

下面是一个仍然可以使用一些清理的工作示例：

---

Wow，这是非常有用的，解释得很好！换言之，我的主要问题是我没有将状态存储在Navbar组件中，因为该组件位于其他组件层次结构之上，如果我将状态存储在该组件中，我将再次访问回调和挂钩，但我想我开始理解如何工作并以正确的方式传递其数据。我将能够将道具传递给NewList和MyJobList组件。谢谢你，Yoshi！我感谢你的帮助！哇，这是非常有用的，解释得很好！换言之，我的主要问题是我没有将状态存储在Navbar组件中，因为此组件位于其他组件层次结构之上如果我将状态存储在该组件中，我将再次访问回调和钩子，但我想我开始了解道具的工作原理并以正确的方式传递其数据。我将能够将道具传递给NewList和MyJobList组件。谢谢你，Yoshi！我感谢你的帮助！