this.setState没有重新呈现视图ReactJS和RubyonRails
this.setState not re-rendering view ReactJS and Ruby on Rails
我有一个rails应用程序,它有两个reactJS组件(不是父/子组件),目前正在通过全局事件Pub/Sub系统进行通信。
但是,当我运行this.setState({ items: this.props.items })
时,我会收到消息Cannot read property 'items' of undefined
。
如果人们能为我为什么会犯这个错误提供任何帮助,我们将不胜感激。
我的基本设置是:
BasketContainer-订阅了两个活动
class BasketContainer extends React.Component{
constructor() {
super()
this.state = {
items: [],
subTotal: 0,
totalPrice: 0,
deliveryPrice: 0
}
}
componentWillMount() {
this.setState( {
items: this.props.items,
})
}
componentDidMount() {
this.token = PubSub.subscribe('ADD_BASKET', this.handleUpdate)
this.token = PubSub.subscribe('REMOVE_ITEM', this.handleUpdate)
this.calculateTotals();
}
componentWillUnmount() {
PubSub.unsubscribe(this.token)
}
handleUpdate(msg, data){
console.log(msg)
this.setState({
items:this.props.items // ERROR MESSAGE - Cannot read property 'items' of undefined
})
}
.... Rest of file
ProductItem-添加到购物篮事件发布服务器
class ProductItem extends React.Component{
constructor() {
super()
this.state = {
name: '',
price: 0,
code: '',
id: ''
}
}
componentWillMount() {
this.setState({
name: this.props.data.name,
price: this.props.data.price,
code: this.props.data.code,
id: this.props.data.id
})
}
addtoBasket() {
$.ajax({
type: "POST",
url: "/items",
dataType: "json",
data: {
item: {
name: this.state.name,
price: this.state.price,
code: this.state.code
}
},
success: function(data) {
PubSub.publish('ADD_BASKET', data); // THIS WORKS FINE
console.log("success");
},
error: function () {
console.log("error");
}
})
}
render(){
let productName = this.props.data.name
let productPrice = this.props.data.price
let productCode = this.props.data.code
let productImg = this.props.data.image_url
return (
<div className="col-xs-12 col-sm-4 product">
<img src={productImg}/>
<h3 className="text-center">{productName}</h3>
<h5 className="text-center">£{productPrice}</h5>
<div className="text-center">
<button onClick={this.addtoBasket.bind(this)} className="btn btn-primary">Add to Basket</button>
</div>
</div>
)
}
}
BasketItem-从Basket Publisher中删除
class BasketItem extends React.Component{
constructor(props) {
super()
this.state = {
name: '',
price: 0,
code: '',
id: '',
quantity: 1,
}
}
componentWillMount() {
this.setState({
name: this.props.data.name,
price: this.props.data.price,
code: this.props.data.code,
id: this.props.data.id,
})
}
deleteItem() {
let finalUrl = '/items/' + this.state.id;
$.ajax({
type: "DELETE",
url: finalUrl,
dataType: "json",
success: function(data) {
PubSub.publish('REMOVE_ITEM', data); // THIS WORKS FINE
},
error: function () {
console.log("error");
}
})
}
render(){
let itemName = this.props.data.name
let itemCode = this.props.data.code
let itemQuantity = 1
let itemPrice = (this.props.data.price * itemQuantity).toFixed(2)
const itemId = this.props.data.id
return(
<tr>
<td>{itemName}</td>
<td>{itemCode}</td>
<td>{itemQuantity}</td>
<td><button className="btn btn-warning" onClick={this.deleteItem.bind(this)}>Remove</button></td>
<td>£{itemPrice}</td>
</tr>
)
}
}
我认为问题在于以下代码行
this.token = PubSub.subscribe('ADD_BASKET', this.handleUpdate)
您作为参数传递的函数需要与"this"绑定
this.token = PubSub.subscribe('ADD_BASKET', this.handleUpdate.bind(this))
REMOVE_ITEM操作也是如此。然后应该很好去:)
您应该将属性items
从其父类传递给BasketContainer。这就是为什么你得到错误Cannot read property 'items' of undefined.
更新:你提到错误的那一行,你得到的错误是因为this
的引用错误;
试试这样的东西:
handleUpdate(msg, data){
var self = this;
this.setState({
items: self.props.items // Here get props from self variable
})
}
相关文章:
- 如何在ReactJS JSX中执行嵌套的if-else语句
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- 如何使用javascript从主svg对象动态创建svg视图框
- 正在使用$location.path(.)路由ng视图
- angular.js没有'无法在PhoneGap中处理视图标记
- 如何包含特定于每个视图angularjs的javascript文件
- 通过在Dojo mobile ViewController.openExternalView中动态更改打开同一外部视图的
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- Ajax Live搜索发布到Laravel视图
- backbone.js无法渲染视图
- 根据某些条件在视图之间切换
- this.setState没有重新呈现视图ReactJS和RubyonRails
- 将视图更改为ReactJS
- Reactjs:基于响应加载视图
- ReactJS没有'无法在AngularJS视图中工作
- ReactJS-如何使用ES5路由视图
- 如何从Rails视图调用内部API(用于ReactJS预呈现程序)
- 带有改变视图的Reactjs组件
- ReactJS渲染url改变的子视图
- 模型视图控制器- ReactJS - onClick不能在原始javascript中工作