＆＃39;道具＆＃39;未定义的内部地图封闭

Question

我得到TypeError: Cannot read property 'props' of undefined。我需要Li组件才能收到props。我顺便使用样式组件。

const Li = styled.li`
  border-top: 0 none;
`;

class Popular extends Component {
    render() {
        var languages = ['All', 'Javascript', 'Java', 'Python'];
        return (
            <ul className='list-group'>
                {languages.map(function(lang){
                    return (
                        <Li className={`list-group-item p-2 ${this.props.className}`}>
                            {lang}
                        </Li>
                    )
                })}
            </ul>
        );
    }
}

export default Popular;

Answer 1

您需要将languages.map的回调绑定到popular类。你可以像这样使用箭头功能

{languages.map((lang) => {

或者只是传递this作为map函数的第二个参数，就像这个

一样

{languages.map(function(lang){
       ...
}, this)}

或者您可以使用bind这样的函数绑定它

{languages.map((function(lang){
       ...
}).bind(this))}