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>
);
}
}
답변
handleSubmit
함수를 클래스에 바인딩하는 것을 잊었습니다. 화살표 함수를 사용하여 함수를 정의 할 수 있습니다.
handleSubmit=(data) =>{
...
}
또는 생성자에서 함수를 바인딩 할 수 있습니다.
constructor(props) {
super(props);
this.state = {
updateClothingItem: {}
};
this.handleSubmit= this.handleSubmit.bind(this,data);
}
리액트 코드 구현과 관련하여 기술적으로 잘못된 점이 몇 가지 있습니다.
첫째, 클래스를 작성하는 ES6 스타일에서는 Class 속성에 액세스해야하는 모든 함수가 명시 적으로 binded
이어야합니다. 귀하의 경우에는 arrow function
또는 binding in constructor
을 사용하여 handleSubmit 함수를 바인드해야합니다.
둘째 : 당신은 당신의 비동기 요청이 componentWillMount 기능과 그것의 성공 응답에 설정되어, 당신이 설정하고있는 상태. 그러나 setState
을 componentWillMount
에 사용하면 구성 요소가 렌더링 된 후에 트리거되므로 정의되지 않은 검사가 필요합니다. 대신 비동기 요청의 경우 componentDidMount
주기 기능을 사용해야합니다.
점검 AJAX request in componentDidMount
or componentWillMount
셋째할지 여부에이 응답 : setState를 비동기이고 setState를 기능이 표시되는 정확한 출력이 발생되지 후 따라서 상태 값을 기록. 대신 setState callback
을 사용하십시오.
은 자세한 내용은이 답변을 참조하십시오 :
calling setState doesn't mutate state immediately
When to use React setState callback
코드 :
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>
);
}
}
- 1. 정의되지 않은 속성 'prototype'을 읽을 수 없습니다.
- 2. 잡히지 않은 typeerror가 정의되지 않은 속성 'split'을 읽을 수 없습니다
- 3. MyApp 클래스에서 오류가 발생했습니다. 정의되지 않은 'setRoot'속성을 읽을 수 없습니다.
- 4. 정의되지 않은 각도 4의 속성 'create'을 읽을 수 없습니다.
- 5. 잡히지 않은 TypeError : 정의되지 않은 속성 'htmlSource'를 읽을 수 없습니다
- 6. 정의 된 맵의 정의되지 않은 속성 'set'을 읽을 수 없습니다.
- 7. 값 : TypeError : 정의되지 않은 (...)의 'arr'속성을 읽을 수 없습니다. TypeError : 정의되지 않은 'arr'속성을 읽을 수 없습니다.
- 8. ReactJS가 "정의되지 않은 속성 'map'을 읽을 수 없습니다."
- 9. Breeze : 정의되지 않은 'isAnonymous'속성을 읽을 수 없습니다.
- 10. React가 정의되지 않은 속성을 읽을 수 없습니다.
- 11. TypeError : 정의되지 않은 'token'속성을 읽을 수 없습니다.
- 12. 2d 배열에서 "정의되지 않은 속성 0을 읽을 수 없습니다."
- 13. 가능한 원인 정의되지 않은 속성 생성자를 읽을 수 없습니다.
- 14. 속성 $를 읽을 수 없습니다. 정의되지 않았습니다.
- 15. 정의되지 않은 CJuiDatePicker의 속성 'fadeIn'을 읽을 수 없습니다. yii
- 16. 정의되지 않은 'string'속성을 읽을 수 없습니다.
- 17. json을 호출하고 Jquery에서 오류가 발생했습니다 "정의되지 않은 속성"길이 "를 읽을 수 없습니다
- 18. ReactJS - 정의되지 않은 'items'속성을 읽을 수 없습니다.
- 19. ReactJS 및 bcryptjs로 정의되지 않은 속성 'state'을 읽을 수 없습니다.
- 20. "정의되지 않은 속성 '맵'을 읽을 수 없습니다. react/redux
- 21. 정의되지 않은 QuaggaJS의 속성 'init'을 읽을 수 없습니다
- 22. Uncaught TypeError : 정의되지 않은 속성 'attributes'을 읽을 수 없습니다.
- 23. Uncaught TypeError : 정의되지 않은 속성 'r'을 읽을 수 없습니다.
- 24. 정의되지 않은 'index'속성을 읽을 수 없습니다.
- 25. 실패 : 정의되지 않은 (각도기) 속성 'then'을 읽을 수 없습니다.
- 26. 정의되지 않은 각도의 속성 'completed'을 읽을 수 없습니다. 2
- 27. 선행 각도 ui - 정의되지 않은 속성 'length'을 읽을 수 없습니다.
- 28. 정의되지 않은 JSON의 속성 '0'을 읽을 수 없습니다.
- 29. 각도 재료 테이블에서 정의되지 않은 속성 '템플리트'를 읽을 수 없습니다.
- 30. 반응에서 정의되지 않은 속성 "이름"을 읽을 수 없습니다.