解构语法-默认值

[patchBig]

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[Chen-jj]

暂时通过使用 defaultProps 解决

[patchBig]

现在的 需求是 自己定义了一个组件，能够自定义 title ，组件中已经定义了 defaultProps

然后在 页面中，不需要传入 title 字段

这样的话就会导致这个问题

[yuche]

@patchBig

// 原来
success(res) {
...
}
// 写成这样：
success: (res) => {
..
}
// 或者在一开始的时候
const { onLoginSuccess } = this.props
onLoginSuccess()

这样你就不用写 that 了，当你写 that.props.onLoginSuccess() 的时候编译器检测不到你这个函数是从哪来的。

[Chen-jj]

@patchBig 你子组件定义了 defaultProps，父组件不传 title，不就使用了 defaultProps 中定义的 title 值了么。

[zhouweiming]

结构语法里面，为null的值不会使用默认值，undefined才会使用默认值，这是正常的吧

[patchBig]

@patchBig 你子组件定义了 defaultProps，父组件不传 title，不就使用了 defaultProps 中定义的 title 值了么。

并没有。。。直接就是 null

[Chen-jj]

@zhouweiming 父组件不传的话，在 react 中是 undefined，他这样写应该正常取到默认值。

但小程序中，props 通过小程序组件化的 properties 实现，父组件不传时参数默认值为 null，所以他这种解构写法取不到默认值。

暂时推荐使用 defaultProps 解决。

[Chen-jj]

@patchBig 贴一下父子组件可复现代码。

感觉你是写了 defaultProps 的同时，又使用了解构赋予默认值的写法。

[patchBig]

子组件

import { Block, View, Form, Button, Image, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
import Toast from '../toast/index'
import Classnames from 'classnames'
import './index.scss'
// 用户注册模态框
let app = Taro.getApp()

@withWeapp('Component')
class _C extends Taro.Component {
  constructor(props) {
    super(props);
  }
  defaultProps = {
    show: false,
    title: '登录或注册'
  }

 render() {
    let {
      showModal: showModal,
      showPhoneRegisterModal: showPhoneRegisterModal,
      phoneNumber: phoneNumber
    } = this.state;

    let { show, title } = this.props;
    console.log(this.props)
 }
}

[patchBig]

父组件

<RegisterModal 
          onLoginSuccess={this.loginSuccess.bind(this)}
          show={showLoginWays}
        />

[yuche]

那你就只能这样了：

success: (res) => {
..
}

或者你写 async/await，不用回调式的 API。

[patchBig]

那你就只能这样了：

success: (res) => {
..
}

或者你写 async/await，不用回调式的 API。

这样可以 👍

不过为啥用 that 不好使呢？之前的 that 和 this 不是一个东西吗？🐶

[patchBig]

那你就只能这样了：

success: (res) => {
..
}

或者你写 async/await，不用回调式的 API。

因为数据绑定的延时性？上面的 console 应该就说明这个问题了，对吗

[patchBig]

@patchBig 贴一下父子组件可复现代码。

感觉你是写了 defaultProps 的同时，又使用了解构赋予默认值的写法。

defaultProps 只能酱写？就没问题。。。

static defaultProps = {
    show: false,
    title: '登录或注册'
  }

[Chen-jj]

@patchBig 额，是的，建议先看看 ES6 class 中 static 属性的文档

[yuche]

@patchBig 因为编译器要求你一定要写 this.props.onXX 或者从 this.props 结构出来的函数才能正确编译。
如果你写箭头函数或者写 async/await 都可以避免这个问题。

[patchBig]

好的 非常感谢

@patchBig 额，是的，建议先看看 ES6 class 中 static 属性的文档

非常感谢。。。

[patchBig]

@patchBig 因为编译器要求你一定要写 this.props.onXX 或者从 this.props 结构出来的函数才能正确编译。
如果你写箭头函数或者写 async/await 都可以避免这个问题。

关于这点的话，文档中貌似没注意到有这一条。。。（不过以后注意吧）