コンポーネントに小道具として渡されたIDを使用して製品オブジェクトを取得するためにAPI経由でデータをフェッチするReactコンポーネントがあります。エラーReact Reduxストアからのデータの取得と小道具へのマッピング
私はReact/Reduxアプリケーションを持っていて、私はReduxのフローがかなり新しいです。 私は、Action/Reducerを経由してストアにデータをロードするProducts(1つのProductオブジェクトを持つ配列)を持っています。
mapStateToPropsパターンを使用して、これをstateからpropsに渡そうとしています。
それは{ this.props.product.title }
Uncaught TypeError: Cannot read property '__reactInternalInstance$z9gkwvwuolc' of null
をレンダリングされたときに、私は次のエラーを取得しています私はそれが非同期thatsのデータであることにその原因を考えます。 これを解決する最も良い方法は何ですか?以下は
は私のコードです -
class ProductListItem extends Component {
componentDidMount() {
this.props.dispatch(fetchProduct(this.props.id));
}
render() {
return (
<div>
<h1>{ this.props.product.title }</h1>
</div>
);
}
}
// Actions required to provide data for this component to render in sever side.
ProductListItem.need = [() => { return fetchProduct(this.props.id); }];
// Retrieve data from store as props
function mapStateToProps(state, props) {
return {
product: state.products.data[0],
};
}
ProductListItem.propTypes = {
id: PropTypes.string.isRequired,
dispatch: PropTypes.func.isRequired,
overlay: PropTypes.string,
};
export default connect(mapStateToProps)(ProductListItem);
ああこれは私が行方不明だったものです!清潔なソリューション、ありがとう! – Yasir