还原器存储中的非结构化数组属性值

Question

目标：从reducer存储中取消结构数组属性值，并将其呈现在我的网页上

然而，当我尝试访问数组值时，我会得到以下错误：

TypeError: Cannot read property 'map' of undefined

这是我的减速器的调度：

const handleOver = () => {
if (profile && links) {
dispatch({
type: "SET_DISCOVER_PROFILE",
item: {
firstNameDiscover: profile.firstName,
lastNameDiscover: profile.lastName,
usernameDiscover: profile.username,
imageUrlDiscover: profile.imageUrl,
linksDiscover: [links],
},
});
}
console.log("IM HOVERING");
};

这是我的控制台在调度后打印的内容：

调度值

以下是如何将值存储在我的reducer:中

export const initialState = {

discoverProfile: {},

};

这就是我如何从我的商店中破坏值：

function PhoneMockupDiscover() {
const [
{
discoverProfile: {
firstNameDiscover,
lastNameDiscover,
usernameDiscover,
imageUrlDiscover,
linksDiscover,
},
},
dispatch,
] = useStateValue();

当我呈现以下内容时，将正确地从存储中提取值：

<div className="profile__image">
<img src={imageUrlDiscover} />
</div>
<div className="profile__container">
<h5>
{firstNameDiscover} {lastNameDiscover}
</h5>
<p>@{usernameDiscover}</p>
</div>

然而，当我试图用通过linksDiscover阵列的阵列进行映射时

<div className="linksOnPhone__wrapper">
{linksDiscover.map((link) => (
<LinkOnPhone linkTitle={link.linkTitle} linkUrl={link.linkUrl} />
))}
</div>

我得到以下错误：TypeError: Cannot read property 'map' of undefined

这是我的StateValue代码：

import React, { createContext, useContext, useReducer } from "react";
// create the data layer
export const StateContext = createContext();
// Build a provider so we can wrap entire app inside of provider so we access data layer
export const StateProvider = ({ reducer, initialState, children }) => (
<StateContext.Provider value={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);
// This is where we use it in a component
export const useStateValue = () => useContext(StateContext);

Answer 1

问题

linksDiscover最初未定义，因此无法映射。

export const initialState = {
discoverProfile: {},
};

这意味着discoverProfile.linksDiscover未定义，因此尝试discoverProfile.linksDiscover.map(...会抛出错误。

解决方案

提供一些更完整的初始状态

export const initialState = {
discoverProfile: {
firstNameDiscover: '',
lastNameDiscover: '',
usernameDiscover: '',
imageUrlDiscover: '',
linksDiscover: [],
},
};

或者在组件中为任何未定义的析构函数值提供回退值

function PhoneMockupDiscover() {
const [
{
discoverProfile: {
firstNameDiscover = '',
lastNameDiscover = '',
usernameDiscover = '',
imageUrlDiscover = '',
linksDiscover = [],
},
},
dispatch,
] = useStateValue();

这将确保discoverProfile.linksDiscover是一个已定义的数组并且能够被映射。