無法讀取的未定義的屬性「toObject」當試圖調用FUNC財產

這是我的組件無法讀取的未定義的屬性「toObject」當試圖調用FUNC財產

class MyComponent extends Component { 
    render() { 
    const { action } = this.props; 
    action(); 
    return (<div>Done!</div>); 
    } 

MyComponent.propTypes = { 
    action: PropTypes.func.isRequired 
}

這裏是一個容器的相關代碼：

doSomething() { 
    ... 
    } 
    render() { 
     return (
     <MyComponent 
     action={doSomething} 
     /> 
    ) 
    }

當我打開這段代碼在瀏覽器中，我得到了這個錯誤信息：

Uncaught TypeError: Cannot read property 'toObject' of undefined

業務邏輯應該活在容器中，所以我不想警察y並將action的代碼粘貼到MyComponent中。

所以我的問題是：如何在render方法中直接調用通過屬性傳入的函數？

來源

2017-04-04 Anthony Kong

PLS顯示action'的'代碼。錯誤似乎發生在'action'內，這意味着'action'被調用。 – Panther

@Ved如何操作this.props，他使用的是{action} = this.props'，這就是所謂的'destructuring'，該語法是正確的。 –

@Panther你是對的。這個異常是在'action'函數內引發的。直到我將一個調試器語句放入函數中，它才從棧跟蹤中顯而易見。請讓你的評論成爲答案，我會接受。 –

我認爲，問題是在這個地方：

doSomething() { 
    ... 
} 

render() { 
    return (
    <MyComponent 
     action={doSomething} //here 
    /> 
    ) 
}

它應該是：

doSomething() { 
    ... 
} 

render() { 
    return (
     <MyComponent 
     action={this.doSomething} 
     /> 
    ) 
}

您需要使用this.doSomething，而不是doSomething。

檢查工作示例：

class App extends React.Component{ 
 

 
    constructor(){ 
 
     super(); 
 
    } 
 
    
 
    doSomething(){ 
 
     console.log('called'); 
 
    } 
 
    
 
    render(){ 
 
     return(
 
      <div> 
 
      Hello 
 
      <Child action={this.doSomething}/> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
var Child = (props) => { 
 
    const {action} = props 
 
    action(); 
 
    return(
 
    <div>Child</div> 
 
    ) 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

來源

2017-04-04 05:41:58

無法讀取的未定義的屬性「toObject」當試圖調用FUNC財產

回答

相關問題