V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pcell
V2EX  ›  React

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

  •  
  •   pcell · 2020-12-09 00:51:18 +08:00 · 2395 次点击
    这是一个创建于 1424 天前的主题,其中的信息可能已经有所发展或是发生改变。

    路由部分:

    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
        1
    pcell  
    OP
       2020-12-09 00:56:31 +08:00
    发出后才发现 Search 组件好像没节选对内容,然而编辑主题居然要注册满 30 天
    FrankFang128
        2
    FrankFang128  
       2020-12-09 01:04:30 +08:00   ❤️ 1
    pcell
        3
    pcell  
    OP
       2020-12-09 01:22:22 +08:00
    @FrankFang128 刚尝试放上 codesandbox.io 后在 ReactDOM.render 那里一直报错 Target container is not a DOM element.但是我本地运行了一下没问题啊,明晚回来再折腾了
    lihongming
        4
    lihongming  
       2020-12-09 03:05:57 +08:00 via iPhone
    你 Router 里难道不是有个空的 List ?
    lalalaqwer
        5
    lalalaqwer  
       2020-12-09 03:14:43 +08:00 via Android
    你的 search 组件下面有一个不需要匹配的不带属性的 list 组件,然后你在搜索选择之后会由 reactrouter 匹配另一个 list,所以最后会显示两个 list
    pcell
        6
    pcell  
    OP
       2020-12-09 08:11:57 +08:00 via Android
    @lalalaqwer 这样吗,我以为会被路由替换掉呢!那如何实现匹配到的 List 替换掉旧有的 List?换个说法就是首页依旧显示 List,路由匹配到时数据显示在同一个 List 上?
    azcvcza
        7
    azcvcza  
       2020-12-09 10:12:16 +08:00
    react 的路由匹配规则一直有点迷,体感没有 vue-router 好用
    abersheeran
        8
    abersheeran  
       2020-12-09 10:23:14 +08:00
    @pcell 你把这个空 List 放在 Switch 之外,框架咋知道你要替换它?他心通吗?

    把你 Switch 之外的 List 删掉,然后加一个 Route path="/" 去设置空 List
    muzuiget
        9
    muzuiget  
       2020-12-09 11:53:27 +08:00
    这种代码真是看得头疼了,不熟 React 的生命周期,不要用高端玩法了。

    问就是加个 key 属性,比如用搜索字符串,然后整个组件刷新。
    pcell
        10
    pcell  
    OP
       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
        11
    pcell  
    OP
       2020-12-09 19:14:45 +08:00
    @muzuiget 组件多起来后岂不是很麻烦?
    KuroNekoFan
        12
    KuroNekoFan  
       2020-12-26 09:45:03 +08:00
    低级错误,<List>用了两次,其中第一次还是无参调用,那可不是一直都显示`什么都没有`?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1759 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 16:33 · PVG 00:33 · LAX 09:33 · JFK 12:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.