第十三课：搜索组件

[aspirantzhang]

本节学习手册：https://www.yuque.com/aspirantzhang/antdprov5/xrglwh

本节代码
3edea05?branch=3edea0523c260b5e205f7081abd4b2e2b7046876&diff=split

请发与本节课有关的讨论。

[SaxonWan]

翻页会自动清空搜索设置。

[aspirantzhang]

确实有这个问题，本课程中考虑不完善，搜索这块应该独立出来控制。我在另外的项目中尝试做了下修改，可参考这个commit

aspirantzhang/thinkphp6-frontend@982a038

[SaxonWan]

我的解决方案如下：
useState，然后添加一个Effect，用于重置页码的同时触发request

  useEffect(() => {
    setPageQuery(pageQuery ? {} : {page: 1});
  }, [searchQuery])

[SaxonWan]

课程需要，老师要用传参数的方法实现，会有些舍近求远。请教老师下，这样写应该没啥问题吧

[aspirantzhang]

这个测试看下吧，我没脑补出来有什么问题 🤣

[SaxonWan]

做到第三个实践的时候，发现一个很低级的错误，pageQuery作为对象，只有为undefine的时候才会返回false，'{}'的返回是true，并且给pageQuery相同的值，仍然会触发useEffect。修改后的写法为：

  useUpdateEffect(() => {
    setPageQuery({});
  }, [searchQuery]);

[81867370]

我在用 Tooltip 的时候，控制台出现下面这个报错，导致页面加载一直在转圈。

Uncaught (in promise) Error: Module "./antd/es/tooltip/style" does not exist in container. while loading "./antd/es/tooltip/style" from webpack/container/reference/mf at mf-va_remoteEntry.js:766

[aspirantzhang]

这个错误我没见过，不太清楚。我建议停掉umi，重新启动一下试试。

[81867370]

我重新安装umi他可以了，可能之前那个丢失文件了

[lansejiyin]

不用重新安装，把src下的.umi文件夹删除，重新npm run start就可以了

[81867370]

我过来是告诉小伙伴控制台的错误在16课结尾的时候 有修复。
我为了清了这两个警告错误，耗费整整 一天，前面的报错 key ,凡是 map 循环 都要加key, 第二个 Crad 动画的时候，报的 ref 的错误，我自己一直以为是 安装 umi 的问题，重新搭了 7 8 个demo,后面 自己在外面多加一层 div 勉强修复，继续看视频学下去，今天看到 16课的修复，发现自学 的道路确实很苦逼，有些小小bug 可能自己就在这绕了半天，英语又不好，有时候，真不知道自己为什么要学习这编程，可能是当成果出来的那一刻的喜悦吧。 加油。

[hh1123456]

兄弟 我跟你遇到一样的错 老师讲的很好一起坚持吧！

[nigiwen]

请教一下，使用动画库报错
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of ForwardRef.

[nigiwen]

试了一下Card和Form这种第三方组件貌似都会出现这个问题，使用div先套一层就没这个问题

[Feb-14and16]

query string 安装了，提示未安装，控制台报错，怎末解决呀

[aspirantzhang]

这种依赖问题一般不难处理。
先检查package.json里有没有
"query-string": "^6.14.1",
如果有，停掉当前运行环境，关掉vscode，重新 yarn start
还不行的话，删除 node_modules，重新 yarn 或 npm install

[Feb-14and16]

感谢老师，我这边发现是src下面的umi文件的问题，最近的环境，每次新安装依赖之后必须要把umi文件夹删除一编

…

------------------ 原始邮件 ------------------ 发件人: "aspirantzhang/antdprov5" ***@***.***>; 发送时间: 2022年1月6日(星期四) 下午4:42 ***@***.***>; ***@***.******@***.***>; 主题: Re: [aspirantzhang/antdprov5] 第十三课：搜索组件 (Discussion #17) 这种依赖问题一般不难处理。 先检查package.json里有没有 "query-string": "^6.14.1", 如果有，停掉当前运行环境，关掉vscode，重新 yarn start 还不行的话，删除 node_modules，重新 yarn 或 npm install — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you commented.Message ID: ***@***.***>

[Feb-14and16]

老师，我这边搜索组件，点击展开没问题，但是再次点击关闭就饱了这些错误，我没有查到解决方法，可以帮忙看一下吗？

[aspirantzhang]

从这个报错来看，可能是在关闭搜索按钮点击后，发现了死循环，造成无限渲染。
所以我觉得首要关注点是，看一下按钮关闭的动作，影响了什么东西，导致让哪个 useEffect 执行了？
可以把你的代码了本节课程代码做比对，先重点比对上面的逻辑。
如果没成功，再看下是不是这个动画组件写错了，和课程代码比对一下。

[Feb-14and16]

老师我找到问题了，我参照了上面wen403同学的回答，发现是可以的，我怀疑是因为页面渲染的问题，关闭的时候这个搜索区域的组件不能及时销毁或者说彻底销毁，搜索区域的内容虽然隐藏了，但实际上代码生成的dom占位还在，然后下方的table组件的内容和这个区域重叠了，所以出现了位置占用冲突，然后出现的问题，我是用上面 wen403 同学的方法用空数组做了替换后就可以了

[Feb-14and16]

我尝试了上面这种图里的方法，确认了这种猜测，应该就是因为这个搜索组件只是被隐藏不是销毁，所以出现了问题，使用空数组后，就把之前的内容覆盖掉了，不过感觉我这种解释还是有点怪怪的，您有空的话，麻烦指导一下我这个问题的解释，谢谢

[aspirantzhang]

咱们用的这个动画组件QueueAnim，要求：
每个子标签必须带 key，如果未设置 key 将不执行动画。
所以核心在于这个动画组件对包裹的内容有要求。

 {searchVisible && (<div>xxx</div>)}

如果这样做判断，当searchVisible为假时，整个表达式结果为false，动画组件QueueAnim不认识false

 {searchVisible ? (<div>xxx</div>): null}

如果这样做判断，当searchVisible为假时，整个表达式结果为null，动画组件QueueAnim认识null

所以课程中这块&&的写法不正确，应该用?:null来写。

综合来看，这块的原因主要还是动画组件QueueAnim的一个特定要求。

如果刨除这个组件的特别要求不提，一般：

visible && <div>xxx</div>
visible ? <div>xxx</div> : null
visible ? <div>xxx</div> : []
visible ? <div>xxx</div> : false
visible ? <div>xxx</div> : ''

都可以实现 通过判断visible的值来隐藏div的目的，且以前两种写法比较多。

[jss-less-step]

qs无法解决空字符串的问题，感觉可以用正则表达式解决，暂时没发现啥bug /\w*=&|&?\w*=$/g

[PF91]

搜索里的clear按钮，清除搜索数据，用htmlType="reset"参数应该也可以。

[yangzi0210]

Ant-motion 还是报错 Cannot read properties of null (reading 'useRef') 外面再套一层

也报错 不知道什么问题 先不用了

const searchLayout = () => {
return (
<QueueAnim type="top">
{searchVisiable ? (
<Card key="searchForm">
<Form {...layout} onFinish={onFinish}> 
<Row gutter={24}> 
<Col sm={6}> 
<Form.Item label="ID" name="id" key="id"> 
<InputNumber style={{ width: '100%' }} /> 
</Form.Item> 
</Col>
 {SearchBuilder(init.data?.layout.tableColumn)} 
</Row>
 <Row> 
<Col sm={24} className={styles.textAlignRight}> 
<Space key="space"> 
<Button type="primary" htmlType="submit" key="submitButton"> Submit </Button> 
<Button htmlType="reset" onClick={() => { init.run(); }} key="clearButton" > Clear </Button> 
</Space> 
</Col> 
</Row> 
</Form> 
</Card> ) : null} 
</QueueAnim> ); };

[yangzi0210]

搜索组件感觉这样看起来更舒服
代码
case 'datetime':
return (

<Form.Item {...basicAttr}>
<DatePicker.RangePicker
showTime
disabled={field.disabled}
style={{ width: '126%' }}
presets={rangePresets}
/>
</Form.Item>

);