为什么 react 函数返回新内容后页面还残留有旧内容？

路由部分：

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 组件会同时显示数据内容和"里面什么都没有"，选择其他数据项后数据内容会更新，但是"里面什么都没有"却钉死在页面上，为啥啊？查看页面里面有两个