console.log が必要なプロパティを持つオブジェクトを明確に示しているにもかかわらず、オブジェクト プロパティにアクセスできません (React Redux)
バズファー
React、Redux、React-Redux の使用。
ストアに正しくサブスクライブしましたが、オブジェクトにドリルダウンしようとすると、「未定義のプロパティ 'x' を読み取れません」というメッセージが表示されます。Object のどのプロパティも、何らかの理由で立ち入り禁止になっています。
コードを参照してください:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
class NavList extends Component {
render() {
return (
<div>hello</div>
);
}
}
function mapStateToProps(state) {
// console.log(state.app.data);
return {
data: state.app.data
};
}
export default connect(mapStateToProps)(NavList)
そしてスクリーンキャプチャ：
どんな助けでも大歓迎です。
パトリック
このデータを非同期で取得していると想定しています。そのため、コンポーネントが最初にレンダリングされた時点では、Redux アプリケーションの状態はまだ設定されていません。
そのため、未定義の「x」を取得しています。
これを回避する方法はいくつかあります:
- レデューサーに initialState を設定します。
- ライブラリを使用する (私の仕事ではidxを使用します) 値/プロパティが存在するかどうかを安全に確認します
- 手動でチェックする、例えば
state && state.app && state.app.data || []
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
コメントを追加