路由部分:
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 组件会同时显示数据内容和"里面什么都没有",选择其他数据项后数据内容会更新,但是"里面什么都没有"却钉死在页面上,为啥啊?查看页面里面有两个
1
pcell OP 发出后才发现 Search 组件好像没节选对内容,然而编辑主题居然要注册满 30 天
|
2
FrankFang128 2020-12-09 01:04:30 +08:00 1
|
3
pcell OP @FrankFang128 刚尝试放上 codesandbox.io 后在 ReactDOM.render 那里一直报错 Target container is not a DOM element.但是我本地运行了一下没问题啊,明晚回来再折腾了
|
4
lihongming 2020-12-09 03:05:57 +08:00 via iPhone
你 Router 里难道不是有个空的 List ?
|
5
lalalaqwer 2020-12-09 03:14:43 +08:00 via Android
你的 search 组件下面有一个不需要匹配的不带属性的 list 组件,然后你在搜索选择之后会由 reactrouter 匹配另一个 list,所以最后会显示两个 list
|
6
pcell OP @lalalaqwer 这样吗,我以为会被路由替换掉呢!那如何实现匹配到的 List 替换掉旧有的 List?换个说法就是首页依旧显示 List,路由匹配到时数据显示在同一个 List 上?
|
7
azcvcza 2020-12-09 10:12:16 +08:00
react 的路由匹配规则一直有点迷,体感没有 vue-router 好用
|
8
abersheeran 2020-12-09 10:23:14 +08:00
|
9
muzuiget 2020-12-09 11:53:27 +08:00
这种代码真是看得头疼了,不熟 React 的生命周期,不要用高端玩法了。
问就是加个 key 属性,比如用搜索字符串,然后整个组件刷新。 |
10
pcell OP @abersheeran 确实是解决了,谢谢!不过解决的过程中遇到新问题,还是主题中的代码,我修改 index.js 后会出现链接无法跳转到对应路由的情况,但是把主题中的<Link to={{ path: '/list', state: _case }} >改成<Link to='/list' >保存后能正常跳转,然后再把{{ path: '/list', state: _case }}黏贴回 to=的后面保存,也能正常跳转路由...其他代码没有改动,为什么?前后代码不都一样吗,时不时会这样抽风一下,重启 npm start 也不行。
|
12
KuroNekoFan 2020-12-26 09:45:03 +08:00
低级错误,<List>用了两次,其中第一次还是无参调用,那可不是一直都显示`什么都没有`?
|