无法配合antd中的createForm使用

[pashangshangpo]

import React from 'react'
import { Switch, InputItem, TextareaItem } from 'antd-mobile'
import { createForm } from 'rc-form'
import Header from '@/components/Header'
import CsrComponent from '@/components/CsrComponent'

import './index.less'

class Page extends React.Component {
  render() {
    console.log(this.props.form) // undefined
    const { getFieldProps } = this.props.form

    return (
      <CsrComponent>
        <div className="address-page">
          <Header
            title={ this.props.isEdit ? '编辑地址' : '新增地址' }
          />
          <div className="div" />
          <div className="main">
            <div className="switch-box">
              <p className="name">设置为默认地址</p>
              <Switch
                className="switch"
                {...getFieldProps('switch', {
                  valuePropName: 'checked',
                })}
              />
            </div>
            <div className="list">
              <ul>
                <li>
                  <InputItem
                    className="input"
                    placeholder="收货人姓名"
                  ></InputItem>
                </li>
                <li>
                  <InputItem
                    className="input"
                    placeholder="收货人名"
                  ></InputItem>
                </li>
                <li>
                  <TextareaItem
                    className="textarea"
                    placeholder="收货地址1"
                    autoHeight
                  />
                </li>
                <li>
                  <TextareaItem
                    className="textarea"
                    placeholder="收货地址2"
                    autoHeight
                  />
                </li>
                <li>
                  <InputItem
                    className="input"
                    placeholder="国家"
                  ></InputItem>
                </li>
                <li>
                  <InputItem
                    className="input"
                    placeholder="省"
                  ></InputItem>
                </li>
                <li>
                  <InputItem
                    className="input"
                    placeholder="城市"
                  ></InputItem>
                </li>
                <li>
                  <InputItem
                    type="number"
                    className="input"
                    placeholder="手机号码"
                  ></InputItem>
                </li>
                <li>
                  <InputItem
                    type="number"
                    className="input"
                    placeholder="邮编"
                  ></InputItem>
                </li>
                <li>
                  <InputItem
                    className="input"
                    placeholder="邮箱"
                  ></InputItem>
                </li>
              </ul>
            </div>
          </div>
          <div className="btn">保存</div>
        </div>
      </CsrComponent>
    )
  }
}

Page.getInitialProps = async ctx => {
  return {
    isEdit: true,
    form: {
      consigneeName1: '张三',
      consigneeName2: '李思',
      address1: '杭州市西湖区上杭11号',
      address2: '杭州市西湖区上杭11号',
      countries: '中国',
      province: '杭州',
      city: '杭州',
      phone: 18750821113,
      zipCode: 11000,
      email: '111@qq.com'
    }
  }
}

export default createForm()(Page)

使用getInitialProps后，组件无法接收到createForm高阶组件传递的form参数

[zhangyuang]

@pashangshangpo 并不会拿不到form。。。你这压根就没写super(props)先去看看react class component怎么拿props吧

[pashangshangpo]

记得如果没有写constructor，是不一定要执行super()的

[zhangyuang]

...你不执行super你的props从哪来呢。建议去看看super props到底干了什么

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: 爬上山坡 <notifications@github.com> 发送时间: 2020年6月30日 17:54 收件人: ykfe/egg-react-ssr <egg-react-ssr@noreply.github.com> 抄送: yuuang <569105585@qq.com>, Comment <comment@noreply.github.com> 主题: 回复：[ykfe/egg-react-ssr] 无法配合antd中的createForm使用 (#173)

[pashangshangpo]

class 组件，没有写constructor，不是也可以传递props

[pashangshangpo]

没有使用getInitialProps是可以拿到form参数的，而且也没有手动执行constructor，被getInitialProps这个影响了吧

[pashangshangpo]

改成class组件的方式试试，不要使用函数式的

[zhangyuang]

并不会影响。跟class还是fc也没有关系。即使按你的例子跑我这边也是正常的，你return的数据字段不要叫form。。明显重名了

[zhangyuang]

[zhangyuang]

提供一个复现仓库地址

[pashangshangpo]

还真重名了😓，不过不写getInitialProps还真可以用，好奇葩。我再试验一下，谢谢作者帮忙找了个bug

[zhangyuang]

提供一个复现仓库，即使是重名应该也能看到被覆盖后的属性的

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: 爬上山坡 <notifications@github.com> 发送时间: 2020年6月30日 18:11 收件人: ykfe/egg-react-ssr <egg-react-ssr@noreply.github.com> 抄送: yuuang <569105585@qq.com>, Comment <comment@noreply.github.com> 主题: 回复：[ykfe/egg-react-ssr] 无法配合antd中的createForm使用 (#173)

还真重名了😓，不过不写getInitialProps还真可以用，好奇葩。我再试验一下，谢谢作者帮忙找了个bug

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[pashangshangpo]

真实项目，无法描述

[zhangyuang]

尝试从demo复现的过程中基本就能找到问题。

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: 爬上山坡 <notifications@github.com> 发送时间: 2020年6月30日 18:13 收件人: ykfe/egg-react-ssr <egg-react-ssr@noreply.github.com> 抄送: yuuang <569105585@qq.com>, Comment <comment@noreply.github.com> 主题: 回复：[ykfe/egg-react-ssr] 无法配合antd中的createForm使用 (#173)

真实项目，无法描述

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[pashangshangpo]

还有一个问题，不知道有没有遇到过，就是有些功能渲染需要客户端进行计算的，比如antd里面的轮播图组件，由于轮播图的ul宽度是动态计算的，不管是使用onlyCsr包装还是使用csr的方式进行渲染，宽度始终是0，现在搞不懂哪里出的问题，只好在didMount里面使用延时器。

[zhangyuang]

不清楚你的具体需求如果是要根据当前设备宽度来动态计算的话放在客户端渲染或者用state进行二次渲染皆可

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: 爬上山坡 <notifications@github.com> 发送时间: 2020年6月30日 18:20 收件人: ykfe/egg-react-ssr <egg-react-ssr@noreply.github.com> 抄送: yuuang <569105585@qq.com>, Comment <comment@noreply.github.com> 主题: 回复：[ykfe/egg-react-ssr] 无法配合antd中的createForm使用 (#173)

[pashangshangpo]

window.addEventListener('load', function() { document.body.hidden = false });

突然想起来，之前写了一个这个，不知道有没有影响

[pashangshangpo]

这个先关闭了，我再试试