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

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

  •  
  •   pcell · 42 天前 · 1105 次点击
    这是一个创建于 42 天前的主题,其中的信息可能已经有所发展或是发生改变。

    路由部分:

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

    把你 Switch 之外的 List 删掉,然后加一个 Route path="/" 去设置空 List
    muzuiget
        9
    muzuiget   41 天前
    这种代码真是看得头疼了,不熟 React 的生命周期,不要用高端玩法了。

    问就是加个 key 属性,比如用搜索字符串,然后整个组件刷新。
    pcell
        10
    pcell   41 天前
    @abersheeran 确实是解决了,谢谢!不过解决的过程中遇到新问题,还是主题中的代码,我修改 index.js 后会出现链接无法跳转到对应路由的情况,但是把主题中的<Link to={{ path: '/list', state: _case }} >改成<Link to='/list' >保存后能正常跳转,然后再把{{ path: '/list', state: _case }}黏贴回 to=的后面保存,也能正常跳转路由...其他代码没有改动,为什么?前后代码不都一样吗,时不时会这样抽风一下,重启 npm start 也不行。
    pcell
        11
    pcell   41 天前
    @muzuiget 组件多起来后岂不是很麻烦?
    KuroNekoFan
        12
    KuroNekoFan   24 天前
    低级错误,<List>用了两次,其中第一次还是无参调用,那可不是一直都显示`什么都没有`?
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4515 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 17ms · UTC 01:23 · PVG 09:23 · LAX 17:23 · JFK 20:23
    ♥ Do have faith in what you're doing.