javascript - 嵌套 return 语句中的 "this is undefined"

Question

我正在尝试将一些 Prop mapObject={this.props.mapObject}详细信息={this.props.parsedData.categories[key]传递到另一个组件Item 但我收到 TypeError: this is undefined

Prop 正确传递，因为我能够在调用 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>
                );
            })
        );
    }
}

如何将 props 传递给 Item？

Answer 1

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

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