Question

我一直坚持这个问题的时间最长，并且无法对我为什么无法将值映射到屏幕上取得任何进展。

出于测试目的，当renderSurvey（）console.log下面的代码被注释掉时;控制台将突出显示两个对象（一个作为空对象，第二个作为数组，在数据之后从数据库加载（picture）。）

我的运行假设是空的第一个物体引起了问题，但我仍然难倒。

class SurveyList extends Component {
  componentDidMount(){
    this.props.fetchSurveys();
  }

  renderSurveys(){
    console.log(this.props.surveys);
    return this.props.surveys.map(survey => {
      return (
        <div className='card darken-1' key = {survey._id}>
          <div className='card-content'>
            <span className='card-title'>{survey.title}</span>
            <p>
              {survey.body}
            </p>
            <p className='right'>
              Sent On: {new Date(survey.dateSent).toLocaleDateString()}
            </p>
          </div>
          <div className='card-action'>
            <a>Yes: {survey.yes}</a>
            <a>No: {survey.no}</a>
          </div>
        </div>
      )
    })
  }

  render(){
    return(
      <div>
        {this.renderSurveys()}
      </div>
    )
  }
}

function mapStateToProps({ surveys }) {
  return { surveys };
}

export default connect(mapStateToProps, { fetchSurveys })(SurveyList);

Answer 1

试试这个：

render(){
    if(this.props.surveys && this.props.surveys.length){
      return(
        <div>
          {this.renderSurveys()}
        </div>
      )
    }else{
       return(
          <div></div>
       )
    }
}

它会检查是否已收到props.surveys并已完成，然后尝试在renderSurveys()中运行render()。

使用React运行问题映射信息

1 个答案: