我正在尝试在提交表单后从子组件更新父组件上共享值的状态:
父母
const [search, setSearch] = useState("default");
function handleSubmitted(n) {
setSearch(n);
console.log(search); //Doesn't update, and value lost after refresh
}
return (
<>
<Switch>
<Route exact path="/">
<Landing onSubmit={handleSubmitted} /> //Child responsible to update state
</Route>
<Route path="/add">
<Add />
</Route>
<Route path="/menus">
<RestaurantList search={search} /> //Receives updated state after a redirect
</Route>
</Switch>
</>
);
儿童
export default function Landing(props) {
return (
<>
<section className="center fullpage" id="landing">
<div className="landing__contents">
<h1>DineIn</h1>
<div className="search">
<form onSubmit={props.onSubmit} > //Call function on parent
<input type="text" placeholder="D Spot Cafe" />
</form>
</div>
</div>
</section>
</>
);
}
I'm trying to get <RestaurantList />
to receive the search value typed by the user in <Landing />
to perform the actual search query functions, but the states are not changing.
我的结构完全错误吗?