Question

我得到了无法读取未定义的属性'callToPrayer'

import { adhaan } from './assets/audio.js'

export default class JustPrayClient extends Component {
  constructor (props) {
    super(props)
    // this.props = props   
    this.playSound.bind(this)
  }

  playSound () {
    // console.log(this.props.test)
    this.props.callToPrayer.play() //why is props undefined here?
  }

  render () {
    return (
      <View style={styles.container}>
        <Text onPress={this.playSound} style={styles.welcome}>
          Welcome to React Native! {this.props.test}
        </Text>
      </View>
    )
  }
}

const Main = () => <JustPrayClient callToPrayer={adhaan} test='hello' />

这是否与此背景有关？
如果是这样，我不知道我应该在哪里/如何约束这个......

Answer 1

你有两个选择：

.bind constructor

  constructor (props) {
    super(props);
    this.playSound = this.playSound.bind(this);
  }

OR

使用箭头功能定义playSound

  playSound = () => {
    this.props.callToPrayer.play();
  }

Answer 2

您在构造函数中正确绑定playSound函数。您需要将其分配回函数，如

this.playSound = this.playSound.bind(this)

试试这个，它应该解决你的问题。但是，如果您正在使用webpack并正确指定模块加载器中的预设，则使用箭头函数绑定也可以正常运行

playSound = () = > {
   console.log(this.props.callToPrayer);
}

同样检查一下play()函数是否可以使用console.log()函数，如果它可用，那么你可以使用它。

我的函数在es6类组件中未定义props

2 个答案: