在 render 的 Object.keys().map 中调用状态和 class 方法

Question

我如何在渲染循环中调用函数和状态 -

    render(){
        return(
          <div
             {Object.keys(this.state.valueList).map(function (item) {
                return(
                    <Input key={item} list={this.state.disableList} x={this.getPosition(item)} />
                )


             })}
          </div>
}

    getPosition(value){
        .......
    }

仍然出现错误

TypeError: Cannot read property 'getPosition' of undefined

同this.state.disableList

Answer 1

在您的情况下，this 未绑定且可访问，因此要确保 this 绑定到您的组件并且您可以调用您的函数，请使用 arrow functions, or bind this.

我更喜欢箭头函数，像这样

<Input key={item} list={this.state.disableList} x={(() => this.getPosition)(item)} />

正如@Alexander T 在评论中提到的，这里是你如何 bind this 到 iterator（map、forEach 等...）

Object.keys(this.state.valueList).map(function (item) { .... }, this)

在 render 的 Object.keys().map 中调用状态和 class 方法

Calll states, and class methods inside Object.keys().map in render

loops

render

reactjs

react-jsx