第七课：表单赋值

[aspirantzhang]

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

本节代码
d000985?diff=split

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

[CMG-CEO]

处理datetime的时候，可以直接对creat_time进行转换。这样的转换最简单。create_time:moment(init.dataSource.create_time)。

[CMG-CEO]

dataSource里的status，还没处理吧，switch标签要传true/false

[chenxingyu-cs]

有一个问题，按照代码来说

  useEffect(() => {
    if (modalVisible) {
      init.run();
    }
  }, [modalVisible]);

Modal里的这个useEffect，每次modal被打开的时候，都会根据传进来的url进行init的重新request。
接着，又因为

  useEffect(() => {
    if (init.data) {
      form.setFieldsValue(setFieldsAdaptor(init.data));
    }
  }, [init.data]);

在init的返回值变化的时候，我们会重新给表单赋值。

但为什么我们在点击完Edit的Modal之后再点击Add的Modal，之前的表单信息会留下来呢？
我看了代码，Add的返回里没有DataSource，所以在adaptor之后，会返回一个空的object {}。用这个给表单赋值的话，不是应该清空表单内容吗？

[aspirantzhang]

这块后续课程中会解释和处理，继续往后看即可。

[ifnk]

moment 可以直接判断 string 是否 是 时间格式 的 ，我百度 找了下

`
/** 将obj里面 value 为时间的字符串改成 moment 对象 */
const setFieldsAdapter = (obj: { [key: string]: any }) => {
Object.entries(obj).forEach(x=>{
const [key, value] = x;
const b = moment(value, moment.ISO_8601, true).isValid();
if (b) {
obj[key]= moment(value)
}
})
return obj;
}

`

[pengjie-chen]

是我的错觉吗，现在antd好像处理过了，我都没写adaptor来重新赋值表格，date就直接能用了

[ythsfzjk]

1.请教下，所有使用useEffect的地方都爆这个提示
React Hook useEffect has a missing dependency: 'init'. Either include it or remove the dependency array.
useEffect(() => {
init.run();
console.log(init);
// eslint-disable-next-line react-hooks/exhaustive-deps
/使用上面注释可以屏蔽提示，但是不是很理解，我使用的包依赖见后面/
}, [page, per_page]);

2.包依赖如下：
"@ant-design/icons": "^4.7.0",
"@ant-design/pro-card": "^1.19.0",
"@ant-design/pro-descriptions": "^1.10.0",
"@ant-design/pro-form": "^1.60.0",
"@ant-design/pro-layout": "^6.34.0",
"@ant-design/pro-table": "^2.69.0",
"@umijs/route-utils": "^2.0.0",
"antd": "^4.18.0",
"classnames": "^2.3.0",
"lodash": "^4.17.0",
"moment": "^2.29.0",
"omit.js": "^2.0.2",
"rc-menu": "^9.1.0",
"rc-util": "^5.16.0",
"react": "^17.0.0",
"react-dev-inspector": "^1.7.0",
"react-dom": "^17.0.0",
"react-helmet-async": "^1.2.0",
"umi": "^3.5.0"

[aspirantzhang]

这个是一个提示，不是错误。按照React的使用方法，所有依赖应该放到useEffect最后的数组[]里面，但是useRequest不太符合react这块的设计规范，所以不能把init放进去，这块忽略即可。

[ythsfzjk]

initialValues赋初值，感觉也应该从API中获取才更灵活。

[aspirantzhang]

是的，这块课程中写的不完善，应该是从api中获取才对。

[Chuchudongren]

我在使用DataPicker 的组件的时候，会报以下的错误，但是在页面上显示没有问题，控制台也没有报错，只是代码上面会标红
“DatePicker”不能用作 JSX 组件。
其实例类型 "Component<PickerProps & { status?: "" | "warning" | "error" | undefined; }, unknown, any> & CommonPickerMethods" 不是有效的 JSX 元素。
在这些类型中，"render()" 返回的类型不兼容。
不能将类型“React.ReactNode”分配给类型“import("E:/AntDesign/\u52A8\u6001\u6A21\u578B\u7F51\u7AD9/myapp/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode”。
不能将类型“{}”分配给类型“ReactNode”。ts(2786)

[aspirantzhang]

如果lint也通过，那就不要紧。要紧的是，从这个信息中看，你的目录名中是不是有中文字符。
E:/AntDesign/\u52A8\u6001\u6A21\u578B\u7F51\u7AD9/myapp/
中间那串\u的，是中文还是什么。咱们网站制作中，一般约定不允许出现任何中文目录，否则可能导致各种不明真相的问题。
建议将目录名修改成英文，然后删除node_modules文件夹，重新安装一次依赖。

[Chuchudongren]

中文路径我改正了，但是晚上又报相同的错误，这次我从谷歌上面找，看到相同的例子，他们将@types/react 更新到了 17.0.30 就不会报错，我更新到目前最新版本是 18.0.10 也没有报错，可能是版本的问题，但是不知道为什么引起会这种莫名的错误