Skip to content

static defaultProps 设置了default值,仍会存在undefined的情形 #5864

Closed
@kala888

Description

@kala888
Contributor

如下代码,刷新编译后,会render 3次,第一次是默认值,第二次是undefined,第三次是获取的数据。
componentDidMount 的时候,发送ajax请求,更新dva model。

@connect(({ genericform }) => ({ ...genericform }))
class GenericformPage extends Taro.PureComponent {
  static defaultProps = {
    groupList: [],
    stepList: [],
    actionList: [],
    fieldList: [],
  }

  componentDidMount() {
    const { pageTitle = '' } = this.props
    Taro.setNavigationBarTitle({ title: pageTitle })
    NavigationService.ajax('mock-generic-form/')
  }
    render() {
    const { id, groupList, fieldList, stepList, actionList } = this.props
    console.log('xxxxx2', groupList, fieldList, stepList, actionList)
   }
}

错误如图,
image

编译后代码

key: '_createData',
    value: function _createData() {
      var _this3 = this;

      this.__state = arguments[0] || this.state || {};
      this.__props = arguments[1] || this.props || {};
      var __isRunloopRef = arguments[2];
      var __prefix = this.$prefix;
      ;

      var _genCompid = (0, _taroWeapp.genCompid)(__prefix + "$compid__426"),
          _genCompid2 = _slicedToArray(_genCompid, 2),
          $prevCompid__426 = _genCompid2[0],
          $compid__426 = _genCompid2[1];

      var _genCompid3 = (0, _taroWeapp.genCompid)(__prefix + "$compid__427"),
          _genCompid4 = _slicedToArray(_genCompid3, 2),
          $prevCompid__427 = _genCompid4[0],
          $compid__427 = _genCompid4[1];

      // const { id, groupList = [], fieldList = [], stepList = [], actionList = [] } = this.props


      var _props = this.__props,
          id = _props.id,
          groupList = _props.groupList,
          fieldList = _props.fieldList,
          stepList = _props.stepList,
          actionList = _props.actionList;

      console.log('xxxxx2', groupList, fieldList, stepList, actionList);

Activity

taro-bot

taro-bot commented on Mar 31, 2020

@taro-bot
taro-bot

taro-bot commented on Mar 31, 2020

@taro-bot

欢迎提交 Issue~

如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。

Good luck and happy coding~

Chen-jj

Chen-jj commented on Mar 31, 2020

@Chen-jj
Contributor

@kala888 页面不需要设置 defaultProps,直接给 Store 设置默认值看看

kala888

kala888 commented on Mar 31, 2020

@kala888
ContributorAuthor

@Chen-jj 你的意思设页面上设置defaultProps就会有这个问题?component中就会是好的?我去试试。
我直接在render里面设置默认值,是可以的,编译的代码也设置了默认值。只是觉得,这里应该有些问题

const { id, groupList = [], fieldList, sceneList: stepList = [], actionList = [] } = this.props
Chen-jj

Chen-jj commented on Apr 1, 2020

@Chen-jj
Contributor

@kala888 页面设置 defaultProps 应该是不生效而已,至于为什么是 undefined 可以打断点走查一下。

kala888

kala888 commented on Apr 30, 2020

@kala888
ContributorAuthor

@Chen-jj 确实是页面的defaultProps不生效,如果不是bug,是不是在文档上写上tips,我刚才翻文档,没看到。谢谢

yuminMorning

yuminMorning commented on May 8, 2020

@yuminMorning

if (key === 'navigateTo' || key === 'redirectTo') {
let url = obj['url'] ? obj['url'].replace(/^\//, '') : ''
if (url.indexOf('?') > -1) url = url.split('?')[0]
const Component = cacheDataGet(url)
if (Component) {
const component = new Component()
if (component.componentWillPreload) {
const cacheKey = getUniqueKey()

打断点调试了一下,貌似是这里的问题。在执行 navigateTo 时创建了一个新的组件实例,但在创建时没有传入 props。

而页面组件在第一次初始化时,是通过 createComponent 创建的,其中有正确创建并传入初始的 props:

function createComponent (ComponentClass, isPage) {
let initData = {}
const componentProps = filterProps(ComponentClass.defaultProps)
const componentInstance = new ComponentClass(componentProps)
componentInstance._constructor && componentInstance._constructor(componentProps)
try {

所以在 navigateTo 中,是应该使用 createComponent 创建组件实例,还是说应该参考其实现,自行创建并传入初始的 props?

Chen-jj

Chen-jj commented on May 15, 2020

@Chen-jj
Contributor

@yuminMorning

navigateTo 创建的 Component 是给预加载功能用的,一般情况下不会创建。

真正创建 Component 是在这里:

this.$component = new ComponentClass({}, isPage)

而为 props 赋值是这里的 filterProps 函数。页面是直接 mount,不会经过 filterProps 处理,也就不会合并 defaultProps 了。

if (hasPageInited && !isPage) {
const compid = this.data.compid
if (compid) {
propsManager.observers[compid] = {
component: this.$component,
ComponentClass
}
}
const nextProps = filterProps(ComponentClass.defaultProps, propsManager.map[compid], this.$component.props)
this.$component.props = nextProps
}
if (hasPageInited || isPage) {
mountComponent(this.$component)
}
}

页面不像组件,props 来源只会是状态管理工具的注入,所以我理解是在 store 创建时赋予默认值而不是由 defaultProps 赋予默认值。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

questionFurther information is requested

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @kala888@Chen-jj@yuminMorning

      Issue actions

        static defaultProps 设置了default值,仍会存在undefined的情形 · Issue #5864 · NervJS/taro