AntDesign使用遇到问题整理

最新推荐文章于 2025-04-01 11:33:36 发布

啦啦噜啦啦

最新推荐文章于 2025-04-01 11:33:36 发布

阅读量4.3w

点赞数 2

分类专栏： react ant-design 文章标签： ant 表单

本文链接：https://blog.csdn.net/liu__hua/article/details/77229260

版权

react 同时被 2 个专栏收录

3 篇文章

订阅专栏

ant-design

1 篇文章

订阅专栏

本文针对小白用户，都是最基本的使用问题，多看仔细看ant文档便可解决，此处仅做整理。牛人绕道即可。
1， Form表单
1）使用getFieldDecorator进行组件内容onchange监听，rules判断，如果报错’Cannot read property ‘getFieldDecorator’ of undefined’需要对组件进行Myform = Form.create({})(Myform);
2）点击提交按钮，如果没有执行handleSubmit，原因是按钮需要包含在form表单内并且设置htmlType={“submit”}。点击提交未报错设置的rules未进行判断是因为在handleSubmit内要设置form.validateFields进行域名校验。
3）对Form进行二次封装，因为每次都需要getFieldDecorator毕竟麻烦。在自己封装的BestForm内设置
```js
this.props.children.map(child=>{
const { label, initialValue, rules } = child.props;
return (
<FormItem label={label} {…formItemLayout}>
{getFieldDecorator(child.key, {
initialValue: initialValue,
rules: rules
})(child)}

);

	 报错‘Cannot use 'in' operator to search for 'value' in undefined’
	 改为：
	 ```js
	  const formItems = React.Children.map(children, child => {
      if (!child) return false;
      const { label, initialValue, rules } = child.props;
      return (
        <FormItem label={label} {...formItemLayout}>
          {getFieldDecorator(child.key, {
            initialValue: initialValue,
            rules: rules
          })(React.cloneElement(child))}
        </FormItem>
      );
    });
    ```
    4）form内组件希望和redux数据共通。redux数据更新，组件获取到最近state数据但是不会渲染最新state值。因为getFieldDecorator的initialValue相当于input 的placeholder,不会根据最新数据改变内容。
    
 - 直接设置组件value？form内组件的value是不生效的。
 - 在componentWillReceiveProps里调用setFieldsValue？No，antd的setFieldValue不能放在那里，会死循环。。大写的尴尬。
 -  此时mapPropsToFields就登场啦，噔噔噔噔~所以记住，还是好好看文档吧/囧/囧/囧，如何使用，在Form.create中使用，

Myform = Form.create({
mapPropsToFields(props) {
return {
name: {value: props.stationSel[0].value}
};
}
})(Myform);

<Form onSubmit={this.handleSubmit}> <FormItem {...formItemLayout} label="新岗位名"> {getFieldDecorator("name", { rules: [ { message: "岗位名称不能为空" }] })(<Input placeholder=“请输入岗位名” disabled={!operate} />)}

2， table表格
     1）不显示，报错“Objects are not valid as a React child (found: object with keys {id, updatedTime}， If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `t`.”原因是columns数组元素中未包含dataIndex，识别不了。
     2）table嵌套，父table和子table都需异步获取数据。点击展开子table，开始在expandedRowRender方法中发送请求，请求回调中渲染子table。但是子table不展示，点击没反应。后来在onExpand方法中发送请求获取数据，expandedRowRender方法只用于渲染子table
3，treeSelect数据展示问题，数据一定要有label作为展示字段。
4，Upload文件上传问题，因为思路不够清晰导致搞了一整天，先理下思路。前端传递文件->express获取请求->superAgent做请求转发到后台服务器->数据返回。
但是问题来了，服务器端并未收到任何数据。提示只接收 multipart/form-data格式数据导致思路走偏，一直围绕  request.set('Content-Type', 'multipart/form-data')作文章做了好久。。后来发现superAgent自动识别文件格式自动设置，无需设置，而且自己设置contentType会因确实boundary而报错。后来想当然觉得，一定是superAgent发送给服务器数据不正确，围绕superAgent一顿google，万般找不到头绪，
1）填坑1：前端上传文件ajax必须将文件转为formData()格式才可上传。formData格式不同于对象，let formData = new FormData(); formData.append("file", file);append后输出formData仍为空，是正常的。formData.get('file')是有数据的。
2）填坑2：文件上传经过express转换之后，输出request相关信息会发现req.body,req.params,req.query均为空！这是问题的关键，而不是因为superAgent。express传递给superAgent数据已经出错，所以服务器无法获取数据。为何为空，因为body-parser 不接收multipart/form-data格式的数据。也考虑过绕过body-parse但是没有它formdata数据也未接收到，选择第三方中间件解决。需要引用const formidable = require("express-formidable")；app.use(formidable());可以解决。（最初也引用过其他中间件，输出文件格式不正确不可用，google确实比某度好用些）
3）填坑3：输出req.files即为文件，其他参数在req.fields中，superAgent提供高级别API.attach(name, [path], [filename])和.field(name, value)可供传递文件。将file传递即可。


上传相关代码：页面.js:
Upload = file => {
   let formData = new FormData();
   formData.append("file", file);
   $.ajax({
     type: "POST",
     url: "/ajax/file/import/",
     data: formData,
     contentType: false,
     dataType: "json",
     processData: false,
     success: callback
   });
 };

node_server.js
const express = require("express");
const formidable = require("express-formidable");
const formidableMiddleWare = formidable();

app.post("/ajax/file/*", formidableMiddleWare, function(req, res) {
 console.log(req);
 console.log("******************");
 console.log(req.files);
 let reqJsonData = req.body;
 superagent
   .post("http://10.45.25.70:8081" + req.url)
   .set("Cookie", "sid=" + req.cookies.sid)
   .attach("file", req.files.file)
   // .send(req.fields)
   .end(function(err, rest) {
     console.log(rest);
     // res.send(JSON.parse(rest.text));
   });
});

5，form 动态修改字段(instCode,taxCode)是否必填时，需要手动校验一次
this.setState(
{
required: e.target.value == null || e.target.value == “”
},
() => {
this.baseInfo.validateFields([“instCode”, “taxCode”], {
force: true
});
}
);
6,table宽度设置，如果每一列都设置width，则等于没设置，按照百分比分配，至少有一个不设置宽度，其他才按照px排布。
两个字 30px，7个数字占50px
7,anchor
anchor 组件，如果不想依据body滚动，则提供滚动区域元素getContainer属性

  <Anchor
            getContainer={() => document.getElementById('scrollContent')}
            onClick={this.handleClick}
            targetOffset={40}
          >balalalal</Anchor>
         ```
         要保证    scrollContent(父容器)overflow:auto且高度固定。
          而anchor包含内容元素不要设置overflow:auto，高度自动撑开（控制台查看高度应该比父容器高才对）