Question

我刚刚开始反应，我理解道具和州之间的区别。但是我没有得到的是当我导入一个组件时，我可以使用props设置组件值。然而，设定标题是没有问题的。谁能帮我出来的名字道具可以设置。在我的情况下，它说未定义。

我可以用一个语句修复它fotos.tags有值显示组件。还有另一种方式吗？问题是和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>
    )
  }
}

使用redux在undefined组件中使用props

1 个答案: