2017-10-30 5 views
0

Ich beginne gerade zu reagieren und ich verstehe den Unterschied zwischen Requisiten und Staat. Aber was ich nicht bekomme ist, wenn ich eine Komponente importiere, kann ich den Komponentenwert mit den Requisiten einstellen. Die Einstellung des Titels ist jedoch kein Problem. Wer mir helfen kann den Namen Requisiten einzustellen kann. In meinem Fall heißt es undefiniert.Requisiten in undefinierten Komponenten mit redux

Ich kann es mit einer Aussage fotos.tags hat Wert zeigen Komponente zu beheben. Gibt es auch einen anderen Weg? Das Problem ist das und die foto.tags. In der Komponente this.props.name ist nicht definiert.

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); 

Die Datei '../../../Components/Fotoboek/form/tags.jsx';

Antwort

0

Da Sie auf ComponentWillMount abrufen, ist der Status möglicherweise nicht vorhanden, wenn die Komponente gerendert wird.

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> 
    ) 
    } 
} 
Verwandte Themen