Невозможно прочитать свойство объекта
У меня есть компонент статьи и состояние со всеми моими статьями. Я сопоставляю состояние с реквизитами с нужной статьей, которую хочу отобразить.
console.info(props.article) работает, а console.info(props.article.title) или любой другой атрибут - нет (я получаю Cannot read property 'id' of undefined). Зачем ?
Мой компонент Article.js:
импортировать React из React;
import { connect } from 'react-redux';
const Article = props => (
<div className = "aboutpage-wrapper">
<div className = "container">
{ console.info(props.article)}
{/* <h2>{props.article.title}</h2>
<h3>{props.articlesubtitle}</h3>
<p>{props.article.body}</p>*/}
</div>
</div>
);
const mapStateToProps = (state,props) => ({ article: state.articles.find(function (article) { return article.id === props.match.params.id; })});
export default connect(mapStateToProps)(Article);
Может случиться так, что во время рендеринга у статьи может не быть article внутри опоры. Попробуйте следующее: {console.info (props.article? Props.article: 'Статья еще недоступна;)}
{id: "3", body: "text here", createdAt: 7890, subtitle: "this is the subtitle.", title: "this is the title"} @PraveenKumar
@VikasYadav ваш код возвращает props.article! и если я использую console.info(props.article.title? props.article.title : 'Article not avaialble yet'), я также регистрирую соответствующий props.article.title. так странно !
@JulesCorb можешь проверить как props.article ? props.article.title : 'Article not available yet'.
@PraveenKumar, это действительно работает, я справлюсь с этим, но я ожидал, что смогу просто использовать props.article.title и так далее.
может быть где-то props.article получает null или undefined, так что лучше иметь это условие.
есть ли опечатка props.articlesubtitle? кажется, что не хватает точки.
Я предполагаю, что props.match.params не определен. вы можете показать больше кода, чтобы увидеть, откуда это должно взяться?
@lipp действительно была опечатка, спасибо. props.match.params исходит из параметров URL (с использованием response-router-dom) и был определен. Я обошелся с решением @vikasyadav!
Ответы 1
Ответ детализирует недоступность реквизита и, следовательно, соответствующей коллекции внутри них.
Вы должны сначала проверить наличие вашего реквизита. Вы можете использовать оператор деструктуризации ES6 как:
const { article } = this.props;
что такое же, как
const article = this.props.article ? this.props.article : '';
Кроме того, при рендеринге содержимого внутри вы можете использовать ту же логику для доступности содержимого внутри article, как:
<h2>{props.article.title ? props.article.title : '' } </h2>
Альтернативная логика короткого замыкания:
При рендеринге контента вы также можете написать так:
<h2>{(props.article || {}).title || ''} </h2>
Я надеюсь, это поможет.
Ваше здоровье!
Я не думаю, что последняя часть будет считаться оценкой короткого замыкания; это обычная тернарная операция. Короткое замыкание - это когда вы делаете что-то вроде (props.article || {}).title || '', которое вернет заголовок, если он определен, в противном случае - пустую строку.
Да @Chris, спасибо. Я полностью согласен с тобой. Я имел в виду именно эту фразу. Пожалуйста, отредактируйте ответ, чтобы у нас была и эта информация.
Что вы получаете за
console.info(props.article)?