嵌套return语句中的“ this is undefined”

时间:2019-12-01 18:54:06

标签: javascript reactjs

我正在尝试将一些道具mapObject={this.props.mapObject} details={this.props.parsedData.categories[key]传递给另一个组件Item,但我得到了TypeError: this is undefined

道具能够正确传递,因为我可以在呼叫mapObject的第一行访问道具。我似乎只能在嵌套的return中访问它们。我的代码在下面。

class List extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            this.props.mapObject(this.props.parsedData.categories, function (key, value) {
                return (
                    <div id="dropdown">
                        <div id="category-cirle"><center>{key[0].toUpperCase() + key[1]}</center></div>
                        <div id="dropdown-content">
                            <Item key={key} mapObject={this.props.mapObject} details={this.props.parsedData.categories[key]} />
                        </div>
                    </div>
                );
            })
        );
    }
}

我如何将道具传递到Item

1 个答案:

答案 0 :(得分:1)

您使用function作为mapObjects的第二个参数,因此函数中的this并未引用您的组件类。尝试改用箭头语法,该语法将保留this的上下文:

this.props.mapObjects(this.props.parsedData.categories, (key, value) => {
    return ...
});