Javascript 无法读取属性'；modalIsOpen'；未定义的

我想迭代几个数据，然后将这些数据填充到一个模式中。当单击按钮时，它会根据单击的按钮弹出不同的值。希望这有意义？如果没有：

我迭代了一些数据，所以在每个循环中，我都有一个按钮。当我点击按钮一，我得到一些价值。当我点击按钮二时，我得到了不同的值，但和按钮一的值不一样

var React = require('react');
var Modal = require('react-modal');

Cards = React.createClass({

getInitialState:function(){
      return{
          filteredData: this.props.data, // Im using react-rails to get this 'data'
          modalIsOpen: false
      }
  },

  openModal: function() {
    this.setState({modalIsOpen: true});
  },

  closeModal: function() {
    this.setState({modalIsOpen: false});
  },

  handleModalCloseRequest: function() {
    // opportunity to validate something and keep the modal open even if it
    // requested to be closed
    this.setState({modalIsOpen: false});
  },

  handleInputChange: function() {
    this.setState({foo: 'bar'});
  },

render(){
 var cards=[];
 this.props.data.slice(0, 25).forEach(function(s) {
 cards.push(
  <div key={s.id}>
    <button className="button tiny radius" onClick={this.openModal}>view</button>
    <Modal
      closeTimeoutMS={150}
       isOpen={this.state.modalIsOpen}
       onRequestClose={this.handleModalCloseRequest}>
       <h1>{s.title}</h1>
       <button onClick={this.closeModal}>close</button>
        <div>{s.description}</div>
         <form>
          <input onChange={this.handleInputChange} />
          <input />
          <br/>              
          <button>{s.agree}</button>
         </form>
     </Modal>
  </div>
 )
 });

 return(
  {cards}
 )
}

});
module.exports = Cards;

var React=require（'React'）；
var模态=要求（“反应模态”）；
Cards=React.createClass({
getInitialState:函数（）{
返回{
filteredData:this.props.data，//我正在使用react rails获取此“数据”
modalIsOpen:false
}
},
openModal:function（）{
this.setState（{modalIsOpen:true}）；
},
closeModal:function（）{
this.setState（{modalIsOpen:false}）；
},
HandleModelCloseRequest:函数（）{
//验证某些内容并保持模式打开的机会，即使
//请求关闭
this.setState（{modalIsOpen:false}）；
},
handleInputChange:函数（）{
this.setState（{foo:'bar'}）；
},
render（）{
var卡=[]；
this.props.data.slice（0,25）.forEach（函数）{
扑克牌(
看法
{s.title}
关闭
{s.description}


{s.agree}
)
});
返回(
{卡片}
)
}
});
module.exports=卡片；

---

如果我将

移动到

render（）

中，所有操作都很好，但我需要模态的循环。有办法重写吗？

现在代码中有几个错误

1组件必须只有一个根元素。您应该将

卡包装到元素

return (<div>
   {cards}
</div>);

范例

var Cards=React.createClass({
getInitialState:函数（）{
返回{
filteredData:this.props.data，
modalIsOpen:false，
modalData:{}
}
},
OpenModel：函数（数据）{
这是我的国家({
modalData：数据
});
},
closeModal:function（）{
this.setState（{modalIsOpen:false}）；
},
HandleModelCloseRequest:函数（）{
this.setState（{modalIsOpen:false}）；
},
handleInputChange:函数（）{
this.setState（{foo:'bar'}）；
},
render（）{
var cards=this.props.data.slice（0,25）.map（函数）{
返回(
看法
{s.title}
关闭
{s.description}


{s.agree}
)
}，这个）；
返回(
{卡片}
);
}
});
我将首先创建一个状态
currentData
，这样我可以将
从
循环中移出

getInitialState:function(){
    return{
        filteredData: this.props.data,
        modalIsOpen: false,
        currentData: {}
    }
},

然后我将创建一个单独的函数来创建模态的内容，我将其称为
renderModalContent

renderModalContent: function(s) {
    return (
      <div>
          <h1>{s.title}</h1>
          <div>{s.description}</div>
          <form>
              <input onChange={this.handleInputChange} />
              <button>{s.agree}</button>
          </form>
      </div>
    )
},

您可以看到我正在将
this.openModal
与
this
绑定。您
openModal
是

openModal: function(s) {
    this.setState({modalIsOpen: true, currentData: s});
},

它使用的是
this.setState
，因此是绑定。
s
是我传递给
renderModalContent
函数的参数，因此我们可以将它传递给
this.setState（{currentData}）

这将是
render
方法的返回值

    var cards = this.props.data.slice(0,25).map( (s, i) => {
        return (
            <div key={s.id}>
                <button className="button tiny radius" onClick={this.openModal.bind(this,s)}>View</button>
            </div>
        );
    });

    var currentData = this.state.currentData;
    return(
        <div>
            { cards }                
            <Modal
                closeTimeoutMS={150}
                isOpen={this.state.modalIsOpen}
                onRequestClose={this.handleModalCloseRequest}>
                {
                    Object.keys(currentData).length > 0 ?
                      this.renderModalContent(currentData) :
                      null;
                }
                <button onClick={this.closeModal}>close</button>
            </Modal>
        </div>
        })
    )

var currentData=this.state.currentData；
返回(
{卡片}
{
Object.keys（currentData）.length>0？
此.renderModelContent（当前数据）：
无效的
}
关闭
})
)

编辑：删除了@Alexander和@Sylar在评论中建议的
bind
。React抱怨
警告：bind（）：您正在将组件方法绑定到组件。React以高性能的方式自动为您执行此操作，因此您可以安全地删除此调用。
但当我删除绑定时，值不会传递到模式。从
renderModalContent:
中删除绑定，一切正常。谢谢@如果使用React，则不需要使用bind。createClass@Alexander我不知道。此后一直在使用
class
。谢谢
openModal: function(s) {
    this.setState({modalIsOpen: true, currentData: s});
},

    var currentData = this.state.currentData;
    return(
        <div>
            { cards }                
            <Modal
                closeTimeoutMS={150}
                isOpen={this.state.modalIsOpen}
                onRequestClose={this.handleModalCloseRequest}>
                {
                    Object.keys(currentData).length > 0 ?
                      this.renderModalContent(currentData) :
                      null;
                }
                <button onClick={this.closeModal}>close</button>
            </Modal>
        </div>
        })
    )