一行箭头功能，返回多个

Question

我正在使用ReactJS，但无法获取箭头函数以返回多个函数。

我在onLoad事件上有一个单箭头功能：

<iframe onLoad={() => (this.handleFrame && this.setState({loadingComplete: true}))}></iframe>

上面的代码不起作用。 如何在一行代码上同时返回this.handleFrame和this.setState({loadingComplete: true}) ？

Answer 1

你可以试试这个

<iframe onLoad={() => ({val1: this.handleFrame(), val2: this.setState({loadingComplete: true})})}></iframe>

它将返回具有两个值的对象。

Answer 2

您忘记了调用this.handleFrame：

<iframe onLoad={() => (this.handleFrame() && this.setState({loadingComplete: true}))}></iframe>

请注意，这将调用两个函数，但将返回布尔值（如果两个函数均返回真实结果，则为true，否则为非）

还要注意，如果您的第一个函数未返回真值，则不会调用下一个函数！

如果要调用所有函数而不管它们是否返回真值，并且不关心返回结果，请执行以下操作：

<iframe onLoad={() => { this.handleFrame(); this.setState({loadingComplete: true}) }}></iframe>

Answer 3

您的问题是错的。 您不能一次return两个项目。

您的代码正在检查this.handleFrame ，如果可用， this.setState({loadingComplete: true})执行this.setState({loadingComplete: true})并将其值返回。 如果this.handleFrame不可用，它将返回undefined 。

如果要执行多个功能，可以执行以下操作。

<iframe onLoad={() => ((this.handleFrame() || true) && this.setState({loadingComplete: true}))}></iframe>

如果为this.handleFrame()返回true ，则不需要|| 校验。

如果要返回多个功能，可以执行以下操作。

<iframe onLoad={() => {handleFrame: this.handleFrame, state: this.setState({loadingComplete: true})}}></iframe>