Question

我在我的应用程序中使用React。我使用connect访问商店，简单地说我有这个代码：

class MyComponent extends Component{
   constructor(props){
        super(props)
    }

    render(){
      let components = this.props.components;
      if(components.indexOf("SomeString")){
           //some stuffs
      }
        return (
            <SomeElement/>
        )
    }
}


const mapStateToProps = state => {
    return {
        components: state.someReducer.components
    }
}

export default connect(mapStateToProps)(MyComponent)

组件是一个字符串数组，如果我在render函数中使用console.log(this.props.components)进行打印，我就能在浏览器控制台中看到该数组。但是，如果我尝试使用indexOf在该数组中找到一个值，那么我会收到此错误：

TypeError: components is undefined

那么，我错过了什么？我尝试了很多没有结果的事情

Answer 1

在第一个周期，this.props.components未定义。您可以使用

绕过它

render(){
      if(this.props.components) {
      let components = this.props.components;
      if(components!=null || components!=undefined){ //this will check if components is null or undefined
        if(components.indexOf("SomeString")){
           //some stuffs
        }}
          return (
            <SomeElement/>
          )
    }

Answer 2

您需要检查this.props.components，如此：

render(){
      if(this.props.components) {
        let components = this.props.components;
        if(components.indexOf("SomeString")){
           //some stuffs
        }
        return (
           <SomeElement/>
        )
      } else {
           return(<div>Loading...</div>)
      }
 }

无法在React-redux中使用connect访问商店

2 个答案: