Question

我在我的React应用程序中使用了map函数，但始终传入一个实际的声明方法。我目前正在尝试获得嵌入式箭头功能以用作中继器。这是我要在渲染函数中运行的代码：

    <DropdownButton id='some-id' title={this.state.myId}>
        {Object.keys(this.state.EMPTPS).map(
            k => (
                <Dropdown.Item key={k} eventKey={k}>{this.state.EMPTPS[k]}</Dropdown.Item>
            )
        )}
    </DropdownButton>

因此，我试图遍历在状态声明中创建的对象的一组键，并将这些值用作按钮值，并将这些键用作eventKey和key。这是我的状态下的物体：

    EMPTPS: {
        'KEY1': 'Value1',
        'KEY2': 'Value2',
        'KEY3': 'Value3'
    }

无论何时运行此代码，我都会从react收到“元素类型无效”错误，因此显然这里不对。我确定（并希望）这只是我自己的一个简单语法错误，但是鉴于我在ES6上仍然还很新鲜，并且总体上会做出反应，将不胜感激。

Answer 1

您可以改用使用return语句的语法，有时我去过那里并尝试解决了此问题。我刚刚在箭头后面添加了一个括号，以将逻辑包裹在迭代中，并在最后返回元素。

 <DropdownButton id='some-id' title={this.state.myId}>
        {Object.keys(this.state.EMPTPS).map( k => {
             return <Dropdown.Item key={k} eventKey={k}>{this.state.EMPTPS[k]}/Dropdown.Item>
            }
        )}
    </DropdownButton>

Answer 2

好吧，这与语法完全无关。好消息是代码正确。我的问题在于我的应用程序中具有react-bootstrap和bootstrap的版本。由于应用程序的大小和性质，我无法更新到v4.x，这对于运行bootstrap-react@1.0.0-beta.5是必需的（Dropdown.Item元素似乎无法在外部运行该版本）据我所知。无论如何，一个愚蠢的问题与一个愚蠢的解决方案。谢谢所有的建议。

如何在带有react的Array.map（）函数内部使用箭头函数

2 个答案: