收到错误:无法读取未定义的属性状态
2017-10-31
6953
import React, { Component } from "react";
import FormUpdate from "../components/formUpdate";
import { fetchClothingItem, updateClothingItem } from "../actions/crud";
export default class Update extends Component {
constructor(props) {
super(props);
this.state = {
updateClothingItem: {}
};
}
componentWillMount() {
fetchClothingItem(this.props.match.params.postId)
.then(data => {
this.setState(state => {
state.updateClothingItem = data;
return state;
});
console.log("data", data);
//HERE IT IS RETURNING EXPECTED DATA
console.log("this.state.updateClothingItem",this.state.updateClothingItem)
})
.catch(err => {
console.error("err", err);
});
}
handleSubmit(data) {
//HERE IT IS THROWING:
> "TypeError: Cannot read property 'state' of undefined"
console.log("this.state.updateClothingItem", this.state.updateClothingItem);
updateClothingItem(this.state.updateClothingItem.id, data); this.props.router.push("/update");
}
render() {
return (
<div>
<FormUpdate
//onSubmit={this.handleSubmit.bind(this)}
id={this.state.updateClothingItem.id}
name={this.state.updateClothingItem.name}
sleeveLength={this.state.updateClothingItem.sleeveLength}
fabricWeight={this.state.updateClothingItem.fabricWeight}
mood={this.state.updateClothingItem.body}
color={this.state.updateClothingItem.color}
/>
<button
type="submit"
onClick={this.handleSubmit}
className="addItemButton"
>
Button
</button>
</div>
);
}
}
3个回答
在 React 代码实现方面,存在一些技术错误。
首先,
使用 ES6 编写类的样式,任何需要访问类属性的函数都需要明确
绑定
。在您的例子中,您需要使用
箭头函数
或
构造函数中的绑定
绑定 handleSubmit 函数。
有关更多详细信息,请参阅此答案: 为什么以及何时我们需要在 React 中绑定函数和事件处理程序?
其次:
您已在 componentWillMount 函数中设置了异步请求,并在其成功响应中设置了状态。但是,在
componentWillMount
中使用
setState
是在组件呈现后触发的,因此您仍需要进行未定义的检查。您应该改用
componentDidMount
生命周期函数来处理异步请求。
查看此答案,了解是否在
componentDidMount
或
componentWillMount
中执行
AJAX 请求
第三:
setState 是异步的,因此在 setState 函数之后记录状态值不会导致显示正确的输出。请改用
setState 回调
。
有关更多详细信息,请参阅这些答案:
代码:
export default class Update extends Component {
constructor(props) {
super(props);
this.state = {
updateClothingItem: {}
};
}
componentDidMount() {
fetchClothingItem(this.props.match.params.postId)
.then(data => {
this.setState(state => {
state.updateClothingItem = data;
return state;
});
console.log("data", data);
//HERE IT IS RETURNING EXPECTED DATA
console.log("this.state.updateClothingItem",this.state.updateClothingItem)
}) // this statement will not show you correct result since setState is async
.catch(err => {
console.error("err", err);
});
}
handleSubmit = (data) => { . // binding using arrow function here
console.log("this.state.updateClothingItem", this.state.updateClothingItem);
updateClothingItem(this.state.updateClothingItem.id, data); this.props.router.push("/update");
}
render() {
return (
<div>
<FormUpdate
//onSubmit={this.handleSubmit.bind(this)}
id={this.state.updateClothingItem.id}
name={this.state.updateClothingItem.name}
sleeveLength={this.state.updateClothingItem.sleeveLength}
fabricWeight={this.state.updateClothingItem.fabricWeight}
mood={this.state.updateClothingItem.body}
color={this.state.updateClothingItem.color}
/>
<button
type="submit"
onClick={this.handleSubmit}
className="addItemButton"
>
Button
</button>
</div>
);
}
}
Shubham Khatri
2017-10-31
您忘记将
handleSubmit
函数绑定到类。您可以使用箭头函数来定义该函数。
handleSubmit=(data) =>{
...
}
或者您可以在构造函数中绑定该函数。
constructor(props) {
super(props);
this.state = {
updateClothingItem: {}
};
this.handleSubmit= this.handleSubmit.bind(this,data);
}
palsrealm
2017-10-31
构造函数中还没有状态
如果你想在构造函数中设置状态,你可以这样做
class SomeComponent extends Component {
constructor(props){
super(props)
this.state = { someKey: someValue }
}
}
或者甚至像这样
class SomeComponent extends Component {
state = { someKey: someValue }
}
但在这种情况下,babel 应该正确配置
Denis Rudov
2019-02-12