reduxを使用して未定義のコンポーネントの小道具

Question

私はちょうど反応を開始し、私は小道具と状態の違いを理解しています。しかし、私が得られないことは、コンポーネントをインポートするときに、コンポーネントの値を小道具で設定できることです。しかし、タイトルを設定することは問題ありません。誰が私を助けることができる名前の小道具を設定することができます。私の場合は、定義されていないと言います。

私はfotos.tagsに値show componentがありますというステートメントで修正できます。他の方法もありますか？問題はtheとfoto.tagsです。コンポーネントのthis.props.nameは未定義です。

import React from 'react'; 
    import {Link} from 'react-router-dom'; 
    import {connect} from 'react-redux'; 
    import * as actions from '../../../reducers/fotoboek/fotos/actions.js'; 
    import Tags from '../../../Components/Fotoboek/form/tags.jsx'; 
    class FotoItem extends React.Component { 
     state = { 
     tags:[] 
     } 
     constructor(props) { 
     super(props); 
     } 

     componentWillMount() { 
     this.props.fetchfotosItem(this.props.match.params.item); 
     } 

     handleChange = (e) => { 
     this.setState({ 
      [e.target.name]: e.target.value 
     }); 
     this.setState 
     } 
     GetTags = (event) => { 
     this.setState({ tags: event}); 
     } 

The file 
    GetTheme = (event) => { 
    this.setState({ themes: event}); 
    } 

    render() { 
    const {fotos} = this.props; 
    return (
     <div className="container"> 
<span><fotos.titel/span> 
     <Tags name={fotos.tags} GetTags={this.GetTags}/> 
     </div> 
    ); 
    } 
} 
function mapStateToProps(state) { 
    return {fotos: state.fotos.item} 
} 

export default connect(mapStateToProps, actions)(FotoItem); 

ファイル '../../../Components/Fotoboek/form/tags.jsx';

Answer 1

componentWillMountでフェッチしているので、コンポーネントがレンダリングされるときに状態が存在しない可能性があります。

render() { 
    const {fotos} = this.props; 
    if(fotos) { 
    return (
     <div className="container"> 
     <span><fotos.titel/span> 
     <Tags name={fotos.tags} GetTags={this.GetTags}/> 
     </div> 
    ); 
    } else { 
    return (
     <span> Loading... </span> 
    ) 
    } 
}