저장소 변수에 액세스하려고 할 때 React Redux "정의되지 않은 '상태'속성을 읽을 수 없습니다."오류

debugcn 에 게시 Dev

Dylanlarrivee

저는 React와 Redux를 가르치기 위해 앱을 개발 중이며 스토어에 추가 된 변수에 액세스하려고 할 때 문제가 발생합니다.

저장소 개체에 데이터를 추가하고 console.log를 사용하여 데이터가 있는지 확인할 수 있지만 액세스하려는 실제 변수로 드릴 다운하려고하면 "TypeError : Cannot read property '오류가 발생합니다. 정의되지 않은 상태 '.

상태를 보면 상태가 다음과 같은 것을 알 수 있습니다. { "customerInfo": [], "loginInfo": [], "storeStatus": [{ "status": false}]}

그러나 state.storeStatus [0] (예 : state.storeStatus [0] .status) 내의 항목에 액세스하려고하면 undefined 오류가 반환됩니다.

조건부 렌더링에 사용할 새 변수에 할당하려는 경우 해당 변수에 액세스하려고하는 다른 방법이 있습니까?

storeStatusReducers.js

import deepFreeze from 'deep-freeze'

const state = [];
const storeStatusReducer = (state = true, action) => {
    switch(action.type) {
      case 'STORE_STATUS_UPDATE':
        state = [];  
        return [...state, action.data]
      default:
      return state
    }
  }

 export const updateStoreStatusAction = (status) => {
    return {
      type: 'STORE_STATUS_UPDATE',
      data: {
        status
      }
    }
  }

  deepFreeze(state)
  export default storeStatusReducer;

home.js

import React,  { useState, useEffect } from "react";
import axios from "axios";
import { updateStoreStatusAction } from '../reducers/storeStatusReducers' 
import { useSelector, useDispatch } from 'react-redux'

const storeInfo = {
  storeId : "1337",
  storeStatus: true
}

const HomePage = (props) => {
  const dispatch = useDispatch()
  const storeStatusData = useSelector(state => state.storeStatus);

  let payload = {
    storeId: storeInfo.storeId,
  };
  useEffect(() => {
  axios({
    url: "/api/get-test-data/" + storeInfo.storeId,
    method: "GET",
    data: payload,
  })
    .then((data) => {
     console.log("data.data.storeStatusPayload", JSON.stringify(data.data.storeStatusPayload))
     updateStoreStatus(data.data.storeStatusPayload);
     
    })
    .catch((error) => {
      console.log("changeStoreStatus: Internal server error");
    });
  }, []);

  const updateStoreStatus = (updatedStoreStatus) => {
    dispatch(updateStoreStatusAction(updatedStoreStatus));
  };

  //This works and produces: {"status":false}
  console.log("storeStatusData", JSON.stringify(storeStatusData[0]))
  // This does not when trying to access status
  console.log("storeStatusData", JSON.stringify(storeStatusData[0].status))


  return (
    <div>
      <main>
      <h1>Test App</h1>

      </main>    
    </div>
  );
};

export default HomePage;

업데이트 : 현재 작동 중입니다. 감사!

home.js 업데이트

import React,  { useState, useEffect } from "react";
import axios from "axios";
import { updateStoreStatusAction } from '../reducers/storeStatusReducers' 
import { useSelector, useDispatch } from 'react-redux'

const storeInfo = {
  storeId : "1337",
  storeStatus: true
}

const HomePage = (props) => {
  const dispatch = useDispatch()
  const storeStatusData = useSelector(state => state.storeStatus);

  let payload = {
    storeId: storeInfo.storeId,
  };
  useEffect(() => {
  axios({
    url: "/api/get-test-data/" + storeInfo.storeId,
    method: "GET",
    data: payload,
  })
    .then((data) => {
     console.log("data.data.storeStatusPayload", JSON.stringify(data.data.storeStatusPayload))
     updateStoreStatus(data.data.storeStatusPayload);
     
    })
    .catch((error) => {
      console.log("changeStoreStatus: Internal server error");
    });
  }, []);

  const updateStoreStatus = (updatedStoreStatus) => {
    dispatch(updateStoreStatusAction(updatedStoreStatus));
  };

  //This works and produces: {"status":false}
  console.log("storeStatusData", JSON.stringify(storeStatusData[0]))
  // This does not when trying to access status
  console.log("storeStatusData", JSON.stringify(storeStatusData[0].status))

  const renderLoadingBar = () => {
    if (storeStatusData[0] ) {
      return (
        <div>
          loaded
        </div>
      );
    } else {
      return (
        // table container
        <div>
        loading
         </div> 
      );
    }
  };

  return (
    <div>
      <main>
      <h1>Test App</h1>
<div>{renderLoadingBar()}</div>
      </main>    
    </div>
  );
};

export default HomePage;

새긴 금

효과가 비동기 적으로 실행되기 때문에 초기 렌더링시 데이터를 사용할 수 없습니다. 즉, 존재하지 않는 배열 요소의 prop에 액세스하려고하면 앱이 중단됩니다.

초기 로그 문 이 작동하는 것처럼 보이는 사실 undefined은 초기 렌더링에는 있지만 두 번째 렌더링에서는 예상되는 값 이기 때문일 가능성이 높습니다 . 반면에 두 번째 console.log문은 즉시 실패하고 후속 렌더링에 도달하지 않습니다.

이 문제가 발생하지 않도록하기위한 일반적인 패턴은 단락 평가를 사용하는 것입니다. 예를 들면 :

const HomePage = (props) => {
  // (initial component code here)

  // Only log if the array element exists
  storeStatusData[0] && console.log("storeStatusData", JSON.stringify(storeStatusData[0].status))


  return (
    <div>
      <main>
      <h1>Test App</h1>

      </main>    
    </div>
  );
};

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사