在带有 {} 的 map() 中使用时反应不渲染元素 [重复]答案

【问题标题】：React not rendering an element when used in map() with {} [duplicate]在带有 {} 的 map() 中使用时反应不渲染元素 [重复]
【发布时间】：2023-04-09 03:50:01
【问题描述】：

当我使用这种形式的代码时，React 不会渲染元素：

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

    render() {
        const items = this.props.pratitelji;
        const listItems = items.map((name, index) => {
            e(Pratitelj, { key: index, name: name });
        });
        return listItems;
    }
}

我使用调试器查看发生了什么，并且 e 函数（即 React.createElement）返回 undefined。

但是当我这样使用它时它工作得很好：

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

    render() {
        const items = this.props.pratitelji;
        const listItems = items.map((name, index) => e(Pratitelj, { key: index, name: name }));
        return listItems;
    }
}

问题是为什么？这是一个错误还是我在第一个示例中做错了什么。这也是完整的代码：

'use strict';

const e = React.createElement;

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

    render() {
        const items = this.props.pratitelji;
        const listItems = items.map((name, index) => e(Pratitelj, { key: index, name: name }));
        return listItems;
    }
}

class Pratitelj extends React.Component {
    constructor(props) {
        super(props);
        this.state = { deleted: false };

        this.handleDeleteChange = this.handleDeleteChange.bind(this);
    }

    handleDeleteChange(deletedState) {
        this.setState({ deleted: deletedState });
    }

    render() {
        console.log("rendered");
        if (this.state.deleted) {
            return '';
        }

        return e(
            'div',
            null,
            e(PratiteljIme, { name: this.props.name }),
            e(PratiteljDeleteButton, { handleDeleteChange: this.handleDeleteChange})
        );
    }
}

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

    render() {
        return e(
            "span",
            null,
            this.props.name)
    }
}

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

    render() {
        return e(
            "button",
            { type: "button", "onClick": this.props.handleDeleteChange},
            "X"
            )
    }
}

function loadListaPratitelja(pratitelji) {
    const lista = pratitelji.split(",");
    const domContainer = document.querySelector('#listaPratitelja');
    ReactDOM.render(e(ListaPratitelja, {pratitelji: lista}), domContainer);
}

输入变量“pratitelji”只是一个带有几个 CSV 的字符串（例如 p1、p2、p3、p4）。我使用的反应版本是这些： https://unpkg.com/react@16/umd/react.development.js https://unpkg.com/react-dom@16/umd/react-dom.development.js 我测试它的浏览器是用于开发的最新版本的 Firefox。

【问题讨论】：

没有主体 () => ... 的箭头函数将隐式返回唯一的表达式，但是带有主体 () => { ... } 的箭头函数与任何其他函数一样，您需要显式地 return从中得到一个值。

标签： javascript arrays reactjs ecmascript-6 arrow-functions

【解决方案1】：

使用{ 和} 你正在创建一个不返回任何东西的函数，除非你return 一些东西。因此.map 将返回一个填充有undefined 的数组。

【讨论】：

【解决方案2】：

将您的代码更新为：

const listItems = items.map((name, index) => {
    return e(Pratitelj, { key: index, name: name });
});

如果你在箭头后面打开一个函数，你必须说明你要返回什么。

【讨论】：