TypeError:无法销毁属性'title'共'pres[0]'因为它是未定义的.(反

我是React世界的新手，我正在做一个愚蠢的项目，以获得一些经验并深入了解这种美妙的乐器，我也是stackoverflow的新手，这是我在这里的第一篇文章，所以我希望不要犯太多错误。

在我的项目中，我有一个ProfileComponent，看起来像这样：

const ProfilePage = () => {
const presentationUrl = baseUrl + 'presentation';
const pres = useSelector((state) => state);
const dispatch = useDispatch();
const fetchPresentation = async () => {
const response = await axios
.get(presentationUrl)
.catch((err) => {
console.log('Err', err);
});
dispatch(addPresentation(response.data));
console.log(response.data);
}
useEffect(() => {
fetchPresentation();
}, []);
return (
<div className="profile-page">
{ /* Profile page fixed image (left side) */}
<div className="image-container col-md-5 col-sm-12">
<div className="mask">
</div>
<div className="main-heading">
<h1>PR<span>O</span>FILE</h1>
</div>
</div>
{ /* Profile page content (right side) */}
<div className="content-container col-md-7 col-sm-12">
{ /* PRESENTATION */}
<ProfilePresentation />
{ /* Footer */}
<Footer />
</div>
</div>
);
}

PresentationComponent(包含ProfilePresentation常量(如下所示：

export const ProfilePresentation = () => {
const pres = useSelector((state) => state.presentation.presentation);
console.log(pres[0]);
const { title, subtitle, image, description } = pres[0];
return (
<>
{ /* Presentation */}
<div className="story clearfix">
<h2 className="small-heading">{title}</h2>
<div className="col-lg-11 col-lg-offset-1">
<div className="story-content clearfix">
<img alt="" src={image} className="col-xs-offset-1 col-sm-offset-0 col-sm-4 col-xs-10" />
<div className="col-sm-8 col-xs-12">
<h3>{subtitle}</h3>
<p>
{description}
</p>
<a href="#" className="hire-me">Hire Me</a>
<a href="#">Download Resume</a>
</div>
</div>
</div>
</div>
</>
);
}

这是我的演示Actions.js:

import * as ActionTypes from '../constants/ActionTypes';
export const addPresentation = (presentation) => {
return {
type: ActionTypes.ADD_PRESENTATION,
payload: presentation
};
};

这是ActionTypes.js:

export const ADD_PRESENTATION = 'ADD_PRESENTATION';

这是我的演讲Reducer.js:

import * as ActionTypes from '../constants/ActionTypes';
const initialState = {
presentation: [],
}
export const presentationReducer = (state = initialState, { type, payload }) => {
switch (type) {
case ActionTypes.ADD_PRESENTATION:
return { ...state, presentation: payload };
default:
return state;
}
}

我还有一个本地json服务器，它在上，其中包含一个db.json文件，如下所示：

{
"presentation": [
{
"title": "PRESENTATION",
"subtitle": "An Awesome Web delevoper on planet",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum.",
"image": "../../public/assets/images/dp.jpg"
}
]
}

现在，这就是正在发生的事情：

在ProfileComponent的console.log上(在fetchPresentation const中(，控制台中的打印结果运行良好，并按照我的意愿返回数据，因此，在此之前，一切都运行良好

[{…}]
0:
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum."
image: "../../public/assets/images/dp.jpg"
subtitle: "An Awesome Web delevoper on planet"
title: "PRESENTATION"
__proto__: Object
length: 1
__proto__: Array(0)

PresentationComponent：在这里，我开始遇到一些麻烦，如果我注释掉你在我发布的代码中看到的第6行(const｛title，subtitle，image，description｝＝pres[0]；(，我在第4行的console.log运行良好，并返回了我想要的正确数据：

{title: "PRESENTATION", subtitle: "An Awesome Web delevoper on planet", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…Suspendisse non nisl at velit malesuada bibendum.", image: "../../public/assets/images/dp.jpg"}
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum."
image: "../../public/assets/images/dp.jpg"
subtitle: "An Awesome Web delevoper on planet"
title: "PRESENTATION"
__proto__: Object

但如果我试图使用第6行，我会出现错误，这就是我帖子的标题：

TypeError:无法销毁"pres[0]"的属性"title"，因为该属性未定义。

我已经找到了解决方案，但我不喜欢它，所以我想从你们那里得到一些提示，帮助我摆脱这个错误。最终的解决方案将是，而不是第6行，写入以下行

const title = pres[0]?.title;
const subtitle = pres[0]?.subtitle;
const image = pres[0]?.image;
const description = pres[0]?.description;

通过这种方式，一切都在工作，但在这种情况下，我只有几个字段，只有一行数组，这也可以。

那么，有可能使用代码的第6行，并进行一些更正，而不是使用所有这些代码弹药吗？

基本上，您的初始状态是一个空数组，因此pres[0]是未定义的，您不能从中销毁属性。

const initialState = {
presentation: [],
}

您可以使用Nullish合并运算符来提供要从中进行析构函数的回退值，而不是使用可选链接语法来访问嵌套属性。这在左手边为null或未定义的情况下提供了一个回退值。

const { title, subtitle, image, description } = pres[0] ?? {};

相关内容

最新更新

热门标签：