使用 redux 的未定义组件中的道具答案

【问题标题】：props in undefined components using redux使用 redux 的未定义组件中的道具
【发布时间】：2017-10-30 16:54:04
【问题描述】：

我刚开始做出反应，我了解道具和状态之间的区别。但是我没有得到的是，当我导入组件时，我可以使用道具设置组件值。但是设置标题是没有问题的。谁能帮我出名字道具可以设置。就我而言，它说未定义。

我可以通过声明 fotos.tags has value show 组件来修复它。还有其他方法吗？问题是和 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);

【问题讨论】：

标签： reactjs redux components

【解决方案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>
    )
  }
}

【讨论】：