訪問狀態從渲染功能

所以我需要運行此行代碼：訪問狀態從渲染功能

var vehicles = this.state.vehicles;

在渲染功能：

render: function(){...}

目前，我得到這個錯誤：

Uncaught (in promise) TypeError: Cannot read property 'state' of undefined

即使這條線路起作用：

this.setState({vehicles: json})

這也是部分代碼：

getInitialState: function(){ 
    this.render = this.render.bind(this) 
    return { 
     vehicles: [] 
    } 
}

我怎樣才能解決這個錯誤，並訪問數據？

來源

2017-08-01 Ed Lynch

需要看到你的代碼的一部分，你使用這些語句。它很難猜測 –

您不綁定渲染功能。我假設你正在使用React.createClass創建一個組件，因爲你正在使用getInitialState來初始化狀態。使用React.createClass，React會自動爲您執行綁定。

即使通過擴展React.Component來創建組件，render方法和生命週期函數也會自動綁定到React Component上下文。

你getInitialState功能將只是

getInitialState: function(){ 
    return { 
     vehicles: [] 
    } 
    }

樣本工作片斷

var App = React.createClass({ 
 
    getInitialState: function() { 
 
     console.log(this); 
 
     return {count: 0} 
 
    }, 
 
    render: function() { 
 
     return <div>Count:{this.state.count}</div> 
 
    } 
 
}) 
 

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

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

來源

2017-08-01 18:41:43

是的，我認爲它應該但我仍然得到錯誤。 –

我已經添加了一個示例工作片段，請確保您以類似的方式創建組件。不過，我會建議你通過擴展React.Component來創建類，因爲React.createClass將從v16.x.x開始降級 –

要使用this.setState，首先必須聲明組件中的this引用的狀態變量。

你做的是，在consturctor，就像這樣：

constructor(props) { 
    super(props); 
    this.state = {...}; 
}

您可以在陣營文檔閱讀更多有關地方的國家：Adding Local State to a Class。

來源

2017-08-01 18:38:20

從'render：function（）{...}'語句看起來不像OP擴展React.Component類 –

你需要定義初始狀態，它看起來像你沒有，因此你得到的錯誤。

class YourComponent extends PureComponent { 
    state = {}; // <-- Initialize the state 
}

或者用使用ES5（已取消）構造

class YourComponent extends PureComponent { 
    constructor(props) { 
    super(props); 
    this.state = {}; // <-- Initialize the state 
    } 
}

或者

var YourComponent = React.createReactClass({ 

    getInitialState: function() { 
    return {}; // <-- Initialize the state 
    }, 

    // ... 

});

來源

2017-08-01 18:38:58 Crysfel

這似乎是一個上下文綁定問題。

Cannot read property 'state' of undefined

這意味着this是未定義的。我想你在一些變更處理程序中使用它。嘗試到onChange={this.changeHandler.bind(this)}。

來源

2017-08-01 18:41:29

訪問狀態從渲染功能

回答

相關問題