Javascript 在功能组件之间传递表单数据

我是新的反应，我仍然试图理解这一切是如何运作的。 假设我有三个

组件

调用所有其他

组件

的主

应用程序

组件如下所示：

function App() {
    return (
        <Router>
            <div>
                <Route path="/object-list" exact component={ObjectsList}/>
                <Route path="/" exact component={Header}/>
            </div>
        </Router>
    );
}

我想要实现的是使用提交表单中的数据保存状态，然后将其发送到

ObjectsList

组件

const ObjectsList = ({selectedObjects}) => {
    return (
      <div>
        {
          console.log(selectedObjects)
        }
      </div>
    );
}

---

无论我做什么，当我在

objects列表
组件中尝试控制台log
selectedObjects
时，我都会得到
undefined
，我的想法刚刚完成。我真的不知道我需要如何将此
提交的
数据传递给其他组件。
您正在尝试在以不同路径呈现的组件之间共享状态。我们可以通过以下方式实现这一点：

下面是一个工作示例

const WebStart = () => {
    const [inputName, setInputName] = useState("")
    const [inputCity, setInputCity] = useState("")
    const [selectedObjects, setSelectedObjects] = useState([])
    
    let objects = [
        {name: "Object1", city: "City1"},
        {name: "Object2", city: "City2"}
    ]
    
     const handleSubmit = e => {
        e.preventDefault()
        const objectToAdd = {inputName, inputCity};
        setSelectedObjects(objectToAdd)
    }

     return (
        <div>
            <div className="webstart-page">
                <form onSubmit={handleSubmit}>
                      <input value={inputName}/>
                      <input value={inputCity}/>
                      <input type="submit"
                             value="search"
                      />
                </form>
        </div>
    )
}

const ObjectsList = ({selectedObjects}) => {
    return (
      <div>
        {
          console.log(selectedObjects)
        }
      </div>
    );
}

 function Header() {
     const [selectedObjects, setSelectedObjects] = useState([])
        return (
            <header>
                <Navigation/>
                <WebStart setSelectedObjects={setSelectedObjects}/>
                <ObjectsList selectedObjects={selectedObjects}/>
            </header>
        )
    }