Question

我正在开发一个应用程序以自学React和Redux，尝试访问已添加到商店中的变量时遇到问题。

我能够使用console.log将数据添加到存储对象并验证数据是否存在，但是当我尝试向下钻取到想要访问的实际变量时，出现错误：“ TypeError：无法读取未定义的属性'status'”。

在查看状态时，我可以看到状态在那里： {“ customerInfo”：[]，“ loginInfo”：[]，“ storeStatus”：[{“ status”：false}]}

但是尝试访问state.storeStatus [0]中的任何内容（例如：state.storeStatus [0] .status）会返回未定义错误。

如果我想将其分配给要在某些条件渲染中使用的新变量，是否应该尝试访问该变量？

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;

尝试访问存储变量

0 个答案: