Reactjs Can'；t在React中绑定此引用

我正在尝试创建一个包含状态上的活动的ReactList，但是当调用为时，我无法从renderItemOtherActi内部引用变量state

itemRenderer={this.renderItemOtherActi}

我试着使用

itemRenderer={::this.renderItemOtherActi}

或

但是什么都没用，我肯定这是一个非常愚蠢的错误，对不起，我是JSX新手。非常感谢

import React from 'react';
import ReactList from 'react-list';
import './css/bootstrap.min.css';
import './css/small-business.css';
import Navbar from './Navbar';
import Footer from './Footer';    

class Activity_Page extends React.Component {

    state = {
        my_activities: [
            {
                name:"Yoga" 
            },
            {
                name:"Crossfit"
            }],
        other_activities: [
            {
                name:"Zamba"
            },
            {
                name:"Spinnig"
            }]
    };    

    return_state(){
        return this.state;
    }    


    renderItemMyActi(index, key) {
        return <div key={key}>Yoga</div>;
    }    

    renderItemOtherActi(index, key) {
        return <div key={key}>{this.state.my_activities[index].name}</div>;
    }    

    render() {

        return (
        <div>
            <Navbar />
            <div className="Activity_Page container">
                <div className="row">
                    <div className="col-lg-10">
                        <h3>Actividades a las que estoy inscripto</h3>
                        <div style={{overflow: 'auto', maxHeight: 400}}>
                            <ReactList
                                itemRenderer={this.renderItemMyActi}
                                length={this.state.my_activities.length}
                                type='uniform'
                            />
                        </div>
                        <h3>Actividades a las que no estoy inscripto</h3>
                        <div style={{overflow: 'auto', maxHeight: 400}}>
                            <ReactList
                                itemRenderer={this.renderItemOtherActi}
                                length={this.state.other_activities.length}
                                type='uniform'
                            />
                        </div>
                    </div>
                </div>

                <footer className="Footer">
                    <div className="row">
                        <div className="col-lg-12">
                            <Footer />
                        </div>
                    </div>
                </footer>   
            </div>
        </div>
        );
    }
}    

export default Activity_Page;

从“React”导入React；
从“反应列表”导入反应列表；
导入“./css/bootstrap.min.css”；
导入“/css/small business.css”；
从“/Navbar”导入导航栏；
从“./Footer”导入页脚；
类活动\页扩展React.Component{
状态={
我的活动：[
{
名称：“瑜伽”
},
{
名称：“交叉配合”
}],
其他活动：[
{
姓名：“赞巴”
},
{
名字：“斯宾尼”
}]
};    
返回状态（）{
返回此.state；
}    
RenderItemYacti（索引，键）{
回归瑜伽；
}    
renderItemOtherActi（索引，键）{
返回{this.state.my_activities[index].name}；
}    
render（）{
返回(
这是一项很重要的活动
这是一项不可替代的活动
);
}
}    
导出默认活动页面；

您也可以

在构造函数中绑定它：

constructor(props){
  super(props);
  this.renderItemOtherActi=this.renderItemOtherActi.bind(this);
}

或者使用箭头功能

renderItemOtherActi = (index, key) => {
  // ...
}

---

非常好，谢谢你。我已经为此挣扎了几个小时。

renderItemOtherActi = (index, key) => {
  // ...
}