路由部分:
ReactDOM.render(
<div className="main">
<Router history={history}>
<Search></Search>
<List></List>
<Switch>
<Route path="/list" render={(params) => <List {...params}></List>} ></Route>
<Route path="/404" component={PageNotFound}></Route>
</Switch>
</Router>
</div >,
document.getElementById('root')
);
List 组件部分:
function List({ location }) {
let _case = location ? location.state : undefined
console.log(_case);
useEffect(() => {
console.log("List useEffect");
return () => {
}
})
return (
<div className="mainlist">
{_case ? _case["id"] : "里面什么都没有"}
</div>
)
}
Search 组件部分节选(过程是用户在 input 框输入关键字,通过 useRequest 获取并显示后台查询出来的 json 数据列表,点击显示的某一数据后将该数据传到 List 组件显示详细数据):
let content = <li></li>
if (!loading && data && data.hasOwnProperty("data")) {
content = data.data.map(_case => {
return (
<li className="item" key={_case['id']}>
<Link to={{ path: '/list', state: _case }} >{_case["案号"]}</Link></li >
)
})
}
return (
<div className='search'>
<input value={value} onChange={valueHandler} onKeyDown={keydownHandler}></input>
<ul className="searchresult">
{/* {loading ? "加载中" : "加载完毕"} */}
{content}
</ul>
</div>
)
实际运行后刚加载页面时 List 组件会显示"里面什么都没有",Search 组件按以上流程选择一条数据后,List 组件会同时显示数据内容和"里面什么都没有",选择其他数据项后数据内容会更新,但是"里面什么都没有"却钉死在页面上,为啥啊?查看页面里面有两个
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.