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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1226 天前的主题，其中的信息可能已经有所发展或是发生改变。

路由部分：

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

分别对应上面显示的两个数据。为什么第一次显示的数据不会被更新掉？第一次发帖，不知道怎么加语法高亮，见谅见谅。

12 条回复 • 2020-12-26 09:45:03 +08:00

pcell

2020-12-09 00:56:31 +08:00

发出后才发现 Search 组件好像没节选对内容，然而编辑主题居然要注册满 30 天

FrankFang128

2020-12-09 01:04:30 +08:00

codesandbox.io

pcell

2020-12-09 01:22:22 +08:00

@FrankFang128 刚尝试放上 codesandbox.io 后在 ReactDOM.render 那里一直报错 Target container is not a DOM element.但是我本地运行了一下没问题啊，明晚回来再折腾了

lihongming

2020-12-09 03:05:57 +08:00 via iPhone

你 Router 里难道不是有个空的 List ？

lalalaqwer

2020-12-09 03:14:43 +08:00 via Android

你的 search 组件下面有一个不需要匹配的不带属性的 list 组件，然后你在搜索选择之后会由 reactrouter 匹配另一个 list，所以最后会显示两个 list

pcell

2020-12-09 08:11:57 +08:00 via Android

@lalalaqwer 这样吗，我以为会被路由替换掉呢!那如何实现匹配到的 List 替换掉旧有的 List?换个说法就是首页依旧显示 List，路由匹配到时数据显示在同一个 List 上？

azcvcza

2020-12-09 10:12:16 +08:00

react 的路由匹配规则一直有点迷，体感没有 vue-router 好用

abersheeran

2020-12-09 10:23:14 +08:00

@pcell 你把这个空 List 放在 Switch 之外，框架咋知道你要替换它？他心通吗？

把你 Switch 之外的 List 删掉，然后加一个 Route path="/" 去设置空 List

muzuiget

2020-12-09 11:53:27 +08:00

这种代码真是看得头疼了，不熟 React 的生命周期，不要用高端玩法了。

问就是加个 key 属性，比如用搜索字符串，然后整个组件刷新。

pcell

2020-12-09 19:13:50 +08:00

@abersheeran 确实是解决了，谢谢！不过解决的过程中遇到新问题，还是主题中的代码，我修改 index.js 后会出现链接无法跳转到对应路由的情况，但是把主题中的<Link to={{ path: '/list', state: _case }} >改成<Link to='/list' >保存后能正常跳转，然后再把{{ path: '/list', state: _case }}黏贴回 to=的后面保存，也能正常跳转路由...其他代码没有改动，为什么？前后代码不都一样吗，时不时会这样抽风一下，重启 npm start 也不行。

pcell

2020-12-09 19:14:45 +08:00

@muzuiget 组件多起来后岂不是很麻烦？

KuroNekoFan

2020-12-26 09:45:03 +08:00

低级错误,<List>用了两次，其中第一次还是无参调用，那可不是一直都显示`什么都没有`？