从 array.map() 创建组件实例并传递函数答案

【问题标题】：creating component instances from array.map() and handing down functions从 array.map() 创建组件实例并传递函数
【发布时间】：2019-10-09 16:04:20
【问题描述】：

只是一个快速查询。

我有一个数据点数组，并使用它来创建组件的实例。

创建子组件数组的父组件也有一些我希望传递给子组件的功能。有什么办法可以吗？检查代码并告诉我，我遇到了错误。

class App extends React.Component {
  constructor(props) {
    super(props)
    this.handleNext = this.handleNext.bind(this)
  }
handleNext() {
    // some function that uses setState and will cause component to re render
}
render() {
    let children = someArray.map(function(elem, index) {
        return (
            <ChildComponent name = {elem.name} handDownFunc = {this.handleNext}/>
                )
    })
return (
            {children} // I want them to each be able to access and use handleNext
        )
    }

}

【问题讨论】：

您收到了什么错误信息？您是否尝试将 {children} 包装在 <React.Fragment> 元素中？
是的，所以我尝试包装它，但它是更大的一部分（为了便于阅读，我删减了代码），所以这不起作用。错误很老-未捕获的TypeError：无法读取未定义的属性'handleNext'
错误从何而来。它是否从您的 ChildComponent 抛出
问题可能是this不会在传递给map的回调中绑定。尝试使用 lambda（箭头函数），或将 this 存储在临时变量中并将其绑定到 handleNext。
哦，是的，指的是handleNext - 未定义。

标签： javascript reactjs

【解决方案1】：

您收到此错误，因为使用 function 关键字而不是箭头函数。更多信息请关注link。
所以，它将是someArray.map(() => { return() })

【讨论】：

是的，之前发现了一个。傻。不过谢谢！