redux를 사용하는 정의되지 않은 구성 요소의 소품

Question

방금 ​​반응을 시작했고 저는 소품과 국가의 차이점을 알고 있습니다. 하지만 내가 얻지 못하는 것은 컴포넌트를 가져올 때 컴포넌트 값을 소품과 함께 설정할 수 있다는 것입니다. 그러나 titel 설정은 문제가되지 않습니다. 소품 이름을 도울 수있는 사람이 누구인지 설정할 수 있습니다. 내 경우에는 그것은 정의되지 않는다.

fotos.tags의 값이 show 구성 요소입니다. 다른 방법이 있습니까? 문제는 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';

import React, {Component, PropTypes} from 'react' 
import {connect} from 'react-redux'; 
import * as actions from '../../../reducers/fotoboek/tags/actions.js'; 
import Select from 'react-select'; 
import 'react-select/dist/react-select.css'; 

class Tags extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     tags: this.props.name 
    }; 
    } 
    componentDidMount() { 
    this.props.fetchtags(); 
    } 

    updateState(element) { 
    this.setState({tags: element}); 
    this.props.GetTags(element.map(getFullName)); 
    } 

    render() { 
    console.log(this.state.tags); 
    return (
     <div className="form-group"> 
     <label>Tags</label> 
     <Select name="tags" options={this.props.tags} labelKey="naam" class="form-control" valueKey="_id" multi value={this.state.tags} onChange={this.updateState.bind(this)}/> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return {tags: state.tags} 
} 
function getFullName(item, index) { 
    var fullname = [item._id].join(" "); 
    return fullname; 
} 

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

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