ReactJs 中 Map 函数内的模式有错误消息

Question

我想问一个关于投资组合部分的某种网格画廊的问题。每个网格都有一个覆盖层，可以通过鼠标悬停触发，网格由地图函数生成，网格中的数据与 json 文件链接。问题是，当我放置一个我认为是用于网格的模态草稿时，一条错误消息显示“TypeError: Cannot read 属性 'toggleModal' of undefined”。感谢任何解决方案。

import React, { Component } from 'react';
import Modal from './Modal';

class Portfolio extends Component {

  constructor(props) {
    super(props);

    this.state = { isOpen: false };
  }

  toggleModal = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  
  render() {
    if(this.props.data){
      var projects = this.props.data.projects.map(function(projects){
        var projectImage = 'images/portfolio/'+projects.image;
        return <div key={projects.title} className="columns portfolio-item">
          <div className="item-wrap">
           <a href={projects.url} className="open-popup" title={projects.title}> 
               <img alt={projects.title} src={projectImage} />
               <div className="overlay"> 
                  <div className="portfolio-item-meta">
                 <h5>{projects.title}</h5>
                     <p>{projects.category}</p>
                  </div>
                </div>
              <div className="link-icon"><i className="fa fa-link"></i></div>
            </a>
          </div>

          <button  onClick={this.toggleModal}>
            Open the modal
          </button>

          <Modal show={this.state.isOpen} onClose={this.toggleModal} >
            Here's some content for the modal
          </Modal>

        </div>
          
      })
    }

    return (
      <section id="portfolio">

      <div className="row">

         <div className="twelve columns collapsed">

            <h1>Check Out Some of My Works.</h1>

            <div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
                {projects}
            </div>

          </div>

        </div>

   </section>
    );
  }
}

export default Portfolio;

Modal.js 如下：

import React from 'react';
import PropTypes from 'prop-types';

class Modal extends React.Component {
  render() {
    // Render nothing if the "show" prop is false
    if(!this.props.show) {
      return null;
    }

    // The gray background
    const backdropStyle = {
      position: 'fixed',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      backgroundColor: 'rgba(0,0,0,0.3)',
      padding: 50
    };

    // The modal "window"
    const modalStyle = {
      backgroundColor: '#fff',
      borderRadius: 5,
      maxWidth: 500,
      minHeight: 300,
      margin: '0 auto',
      padding: 30
    };

    return (
      <div className="backdrop" style={backdropStyle}>
        <div className="modal" style={modalStyle}>
          {this.props.children}

          <div className="footer">
            <button onClick={this.props.onClose}>
              Close
            </button>
          </div>
        </div>
      </div>
    );
  }
}

Modal.propTypes = {
  onClose: PropTypes.func.isRequired,
  show: PropTypes.bool,
  children: PropTypes.node
};

export default Modal;

Answer 1

错误是由这一行引起的：

var projects = this.props.data.projects.map(function(projects){

由于您在此函数中使用了 this.toggleModal，this 上下文链接到此函数，而不是 React 组件。

解决方案是使用这样的箭头函数：

var projects = this.props.data.projects.map((projects) => {

附带说明一下，在块内定义变量并在块外使用它不是一个好主意。

Answer 2

这是我的修改版，谢谢。如果我想在modal中添加next和previous功能以显示下一个或上一个项目信息，该怎么办？谢谢。很抱歉，我是 React 的新手，Javascript。

import React, { Component } from 'react';
import Modal from './Modal';

class Portfolio extends Component {

  constructor(props) {
    super(props);

    this.state = { 
      isOpen: false,
      activeProjects:"",
      activeProjectImage:""
    };
  }

  toggleModal = (projects,projectImage) => {
    this.setState({activeProjects:projects, activeProjectImage:projectImage},() =>
    this.setState({
      isOpen: !this.state.isOpen
    }));
  }
  
  render() {
    if(this.props.data){
      var projects = this.props.data.projects.map((projects) => {
        var projectImage = 'images/portfolio/'+projects.image;
        return <div key={projects.title} className="columns portfolio-item">
          <div className="item-wrap">
           <a onClick={() => this.toggleModal(projects,projectImage)} className="open-popup" title={projects.title}> 
               <img alt={projects.title} src={projectImage} />
               <div className="overlay"> 
                  <div className="portfolio-item-meta">
                    <h5>{projects.title}</h5>
                    <p>{projects.category}</p>
                  </div>  
                </div>
              <div className="link-icon"><i className="fa fa-link"></i></div>
            </a>
          </div>
        </div>
      })
    }

    return (
      <section id="portfolio">
        <div className="row">
          <div className="twelve columns collapsed">
            <h1>Check Out Some of My Works.</h1>
            <div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
              {projects}
              <Modal show={this.state.isOpen} onClose={this.toggleModal} >
                <img alt={this.state.activeProjects.title} src={this.state.activeProjectImage} />
              </Modal>
            </div>
          </div>
        </div>
      </section>
    );
  }
}

export default Portfolio;

ReactJs 中 Map 函数内的模式有错误消息

A modal inside a Map Function In ReactJs has error message

javascript

dictionary

modal-dialog

reactjs