TypeError: Cannot read property 'name' of undefined inside React component used as child inside another parent component

Question

FundraiserScreen.js

// import necessary stuffs and components;
// import Fundraiser component;
const Children = ({ loading, error, fundraiser }) => {
if (loading) // return and show skeleton loading html
if (!error) return <Fundraiser fundraiser={fundraiser} isCard={false} />
return // container with error message

const FundraiserScreen = ({ match }) => {
const dispatch = useDispatch();
const fundraiserDetails = useSelector((state) => state.fundraiserDetails);
const { loading, error, fundraiser } = fundraiserDetails;
useEffect(() => {
dispatch(listFundraiserDetails(match.params.id));
}, [dispatch, match]);

return (
// some HTML markups
<Children loading={loading} error={error} fundraiser={fundraiser} />
// end HTML markups
);

Children.propTypes = {
loading: PropTypes.bool,
error: PropTypes.bool,
fundraiser: PropTypes.shape({
    _id: PropTypes.string,
    image: PropTypes.string,
    title: PropTypes.string,
    shortDescription: PropTypes.string,
    description: PropTypes.string,
    collected: PropTypes.number,
    goal: PropTypes.number,
    donors: PropTypes.number,
    organizer: PropTypes.shape({
      name: PropTypes.string,
    }),
  }).isRequired,
};

FundraiserScreen.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string.isRequired,
    }),
  }),
};

HomeScreen.js

// import necessary stuffs and components;
// import Fundraiser component;
const Children = ({ loading, error, fundraisers }) => {
if (loading) // return and show skeleton loading html
if (!error) return fundraisers.map((fundraiser) => (
// some HTML markups
<Fundraiser fundraiser={fundraiser} isCard />
// end HTML markups
));
return // container with error message

const HomeScreen = () => {
const dispatch = useDispatch();
const fundraiserList = useSelector((state) => state.fundraiserList);
const { loading, error, fundraisers } = fundraiserList;
useEffect(() => {
dispatch(listFundraisers());
}, [dispatch]);

return (
// some HTML markups
<Children loading={loading} error={error} fundraisers={fundraisers} />
// end HTML markups
);

Children.propTypes = {
loading: PropTypes.bool,
error: PropTypes.string,
fundraisers: PropTypes.arrayOf(PropTypes.object),
};

Fundraiser.js

// import necessary stuff and components
const Fundraiser = ({ fundraiser, isCard }) => {
 const {
 _id, image, title, shortDescription, description,
 collected = 0, goal = 0,
donors, organizer: { name },} = fundraiser;

if (isCard) {
return (
// some HTML markups
// am able to access {name} simply by console.log or inside any HTML element
// end HTML markups
);
}
return (
// some HTML markups
// unable to access {name} neither by console.log or inside any HTML element
// end HTML markups
);
};

Fundraiser.propTypes = {
fundraiser: PropTypes.shape({
_id: PropTypes.string,
image: PropTypes.string,
title: PropTypes.string,
shortDescription: PropTypes.string,
description: PropTypes.string,
collected: PropTypes.number,
goal: PropTypes.number,
donors: PropTypes.number,
organizer: PropTypes.shape({
  name: PropTypes.string,
}),
}).isRequired,
isCard: PropTypes.bool.isRequired,
};

这些是组件。我正在使用 react ^17.0.2、react-redux ^7.2.4、redux ^4.1.0、redux-devtools-extension ^2.13.9 和 redux-thunk ^2.3.0 进行与筹款活动相关的全局状态管理。 node.js 服务器提供后端服务。我无法解决这个问题，请给我一些解决方法。谢谢。

Answer 1

正如错误提示的那样，您的 fundraizer.organizer 未定义，而您正试图从未定义的位置访问 name。

这可能是因为您的 fundraizer 值可能是 {} 或 null 或 undefined 。为防止您的应用崩溃，您可以保护您的价值观。

传递默认值

const Children = ({ loading, error, fundraiser = {} }) => {

通过提供默认参数来保护值

const {
 _id, image, title, shortDescription, description,
 collected = 0, goal = 0,
donors, organizer } = fundraiser || {};

const { name = '' } = organizer || {};

TypeError: Cannot read property 'name' of undefined inside React component used as child inside another parent component

TypeError: Cannot read property 'name' of undefined inside React component used as child inside another parent component

javascript

node.js

reactjs

undefined

typeerror