React (Class Component 형) 에서 Reudx 사용 중 mapDispatchToProps 사용 오류에 대한 질문

Question

안녕하세요! React-Redux 를 사용하다 mapDispatchToProps 가 잘되다가 새로 구현한 부분이 작동하질 않아서 질문드려봅니다. -- 소스 코드 첨부 --import './Login.css'import React, { Component } from 'react'import axios from 'axios';import { connect } from 'react-redux';import {setSessionId} from './redux/actions/sessionActions' class Login extends Component { constructor(props){ super(props); this.state = { input_id: "", input_pw: "", } } render() { const handleSubmit = () =>{ axios.post('http://localhost:8080/api/login',{ username: this.state.input_id, password: this.state.input_pw }, { headers:{ "Content-Type":"application/json", "X-Requested-With":"a" } }, { withCredentials: true } ).then(function(response){ // OnSuccess this.props.settingSessionId(response.data) *************여기 console.log(response); }).catch(function(error){ // 오류 실행 console.log(error); }).then(function(){ // Finally 항상 실행 }) } return ( <>

) }} function mapDispatchToProps(dispatch){ **************** 여기 return { settingSessionId: function(_session_id){ dispatch(setSessionId(_session_id)) } }} export default connect(null, mapDispatchToProps)(Login) 위와 같은 코드를 작성했는데, 작동이 되질 않습니다. settingSesionId 를 props 로 넣어줘서 this.props.settingSessionId() 를 진행하여야 하는 것으로 알고 있는데, 위와 같이 진행하니까 TypeError: Cannot read properties of undefined (reading 'props') 다음과 같은 에러가 발생합니다. this.props 를 없애면 settingSessionId 를 찾을 수 없다고 하네요.. (mapDispatchToProps(dispatch) 이 함수가 settingSessionId 라는 함수를 만들어서 props 에 주입해주는 기능을 하는걸로 이해하고 있는데, 왜 이런 오류들이 발생하는지 잘 모르겠습니다 ) 이 전까지는 mapDispatchToProps 가 리턴해주는 함수 이름을 setSessionId 로 Action 함수 이름과 동일하게 했었는데, 계속 안되어서 (Action 함수까진 타는걸 확인했는데, 그 이후 Reducer 로 가서 값을 setting 해주질 않습니다) 구분해주기 위해서settingSessionId 로 본문 함수 이름을 바꿨습니다. 그랬더니 현 상황과 같은 상황이 발생하네요. 지금까지 잘 쓰고 있었는데 갑자기 새로 추가한 부분에서 오류가 발생하고, 이전에 했던 리듀서들과 차이를 확인해봐도 도저히 차이를 못찾겠네요. 도와주시는 선배님들 계시다면 감사할 것 같습니다. 읽어주셔서 감사합니다

둠칫따당 · Accepted Answer

async handleSubmit() { const response &#61; await axios.post('http://localhost:8080/api/login', { username: this.state.input_knox_id, password: this.state.input_pw }, { headers: { &#34;Content-Type&#34;: &#34;application/json&#34;, &#34;X-Requested-With&#34;: &#34;a&#34; } }, { withCredentials: true }); console.log(response); this.props.settingSessionId(response.data); console.log(&#34;Finally Called&#34;); }저라면 이렇게 작성을 했을 것 같아요. 일단은 Try catch문은 빼고 작성했어요.js는 this의 동작이 일반적인 객체지향과 조금 다릅니다. callback함수를 function으로 하면 원하는 스코프를 참조하지 못해요.수정의 요점은 then문법을 안쓰는거 입니다. 아니면 꼭 then을 써야한다면요. Function예약어 대신 arrow function을 쓰면 됩니다. 저의 추천은 그냥 then문을 안쓰는거입니다.해결이 되었으면 좋겠어요

둠칫따당 · Answer

mapDispatchToProps의 사용간의 문제 전에 props undefined을 해결하고 넘어가야 할 것 같아요. handleSubmit : arrow function안에 Function 선언식 안에 this참조는 좋은 방식이 아닙니다. This의 Property가 다를거예요. 저는 this bind문제라고 생각해요class component 안에 render 안에 함수를 생성하시기 보다 밖에 선언하는걸 추천드려요.export default class Num extends Component{ constructor(props){ super(props); this.handleSubmit&#61;this.handleSubmit.bind(this); } render(){ // 이 안은 변수, return <>만 두는게 일반적입니다. } //여기 method로 함수를 생성해주세요. 그리고 contructor에 this를 바인드 해주세요 handleSubmit(){ //이 안의 코드는 then방식 보다는 async await 방식으로 작성하는 것이 this 문제를 예방할 수 있는 가장 쉬운 방식입니다. } }절대로 위 스타일은 정답이 아닙니다. Login component에서 사용되는 함수가 this.props를 찾지 못하는 문제가 우선적으로 해결해야하고 그 해결 방법중 가장 쉬운게 위 스타일로 작성하는 거라서 알려드립니다.도움이 되었으면 좋겠습니다

cake moon · Answer

둠칫따당님 도움 주셔서 너무 감사합니다. 사실 둠칫님이 지적해주신 부분대로 처음에 개발했던 상태인데 비슷한 오류가 생겨서 위와같은 방식으로 수정했었습니다. 다시 수정해서 진행해봤는데 한번만 다시 봐주시면 감사할 것 같습니다. class Login extends Component { constructor(props){ super(props); this.state = { input_knox_id: "", input_pw: "", } this.handleSubmit = this.handleSubmit.bind(this) } handleSubmit(){ axios.post('http://localhost:8080/api/login',{ username: this.state.input_knox_id, password: this.state.input_pw }, { headers:{ "Content-Type":"application/json", "X-Requested-With":"a" } }, { withCredentials: true } ).then(function(response){ // OnSuccess this.props.settingSessionId(response.data) //redux-> sessionId: console.log(response); }).catch(function(error){ // 오류 실행 console.log(error); }).then(function(){ // Finally 항상 실행 console.log( "Finally Called" ) }) } render() { return ( <>

PTS 로그인

) }} function mapDispatchToProps(dispatch){ return { settingSessionId: function(_session_id){ dispatch(setSessionId(_session_id)) } }} export default connect(null, mapDispatchToProps)(Login) 위와 같은 경우에는 Cannot read properties of undefined (reading 'props')에러가 발생합니다 ㅠ props 자체를 못잡고 잇는 것 같은데 bind 해줬는데 왜 그런지 잘 모르겠네요 ㅠ

cake moon · Answer

then 내부에서 this 를 또 못찾는 문제였군요 ㅠㅠ 해결 되었습니다 둠칫님 정말 감사드립니다!!!!!!

둠칫따당 · Answer

홧팅!

React (Class Component 형) 에서 Reudx 사용 중 mapDispatchToProps 사용 오류에 대한 질문

5개의 답변

#component 목록