如何用reactjs修复“预计在箭头函数中返回一个值”？答案

【问题标题】：How to fix "Expected to return a value in arrow function" with reactjs?如何用reactjs修复“预计在箭头函数中返回一个值”？
【发布时间】：2020-10-20 12:30:03
【问题描述】：

我的 react-app 组件中有两个功能

componentDidMount() {
        if(Object.keys(this.props.praticiens).length>0)
            Object.keys(this.props.praticiens).map((praticien) => {
                if(this.props.praticiens[praticien].identifiant_user === getUrlParams(window.location.hash).identifiant_user)
                    this.setState({
                        praticien:this.props.praticiens[praticien].id_user
                    })
            })
    }

    handleChangePraticien = (praticien) => {
        this.setState({ praticien }, () => {
            Object.keys(this.props.praticiens).map((praticien) => {
                if(this.state.praticien === this.props.praticiens[praticien].id_user)
                    this.props.selectPraticienFunction(this.props.praticiens[praticien].identifiant_user);
            })
        })
    }

当我运行它时，我得到：

Line 26:64:  Expected to return a value in arrow function  array-callback-return
  Line 36:64:  Expected to return a value in arrow function  array-callback-return

比如第 26 行在 componentDidMount 上以 Object.keys(this.props.praticiens).map((praticien) => { 开头，而第 36 行在 handleChangePraticien 函数上是同一行

我该如何解决？

【问题讨论】：

您的 if 语句需要括号 {}。如果 if 语句中的行是单行，则只能删除它们。
@theblackgigant - 单个语句，而不是单行。它们都是单一的陈述。（也就是说，我更喜欢总是在控制流状态上使用{}。）

标签： javascript reactjs object eslint arrow-functions

【解决方案1】：

将 {} 更改为 () 对我有用

从map(() => {}) 到map(() => ())

【讨论】：

是的，对我有用。谢谢
为我工作，谢谢

【解决方案2】：

第 26:64 行：预期在箭头函数 array-callback-return 中返回一个值

由于您不关心从箭头函数返回值并且您没有使用map() 返回的数组，因此您应该改用forEach() 函数。

componentDidMount() {
        if(Object.keys(this.props.praticiens).length>0)
            Object.keys(this.props.praticiens).forEach((praticien) => {
                if(this.props.praticiens[praticien].identifiant_user === getUrlParams(window.location.hash).identifiant_user)
                    this.setState({
                        praticien:this.props.praticiens[praticien].id_user
                    })
            })
    }

    handleChangePraticien = (praticien) => {
        this.setState({ praticien }, () => {
            Object.keys(this.props.praticiens).forEach((praticien) => {
                if(this.state.praticien === this.props.praticiens[praticien].id_user)
                    this.props.selectPraticienFunction(this.props.praticiens[praticien].identifiant_user);
            })
        })

【讨论】：

感谢您的精彩解释。

【解决方案3】：

Array.prototype.forEach() 和 Array.prototype.map() 用于两个不同的目的。

Array.prototype.forEach()

Array.prototype.forEach 用于简单地遍历数组的项，但不返回任何特殊值。它的签名是：

forEach(callback, [thisArg]) => undefined

只有第一个参数 callback 是必需的，它的签名是 (current [, index, array]) => void，其中唯一必需的参数是 current

例子

[1,2,3].forEach( item => console.log(item))
// Output 1 2 3 undefined

Array.prototype.map()

此函数主要用于从另一个Array 创建一个新的Array。与forEach 函数不同，它返回Array。它的签名如下：

map(callback [, thisArg]) => Array。就像forEach 一样，只有第一个参数是强制性的，但回调签名不同：(current [, index, array]) => any。最终数组将包含每次迭代后回调返回的每个值。

例子

[1,2,3].map(item => item ** 2)
// Output [1 4 9]

那里有更多信息：

Array.prototype.forEach()

Array.prototype.map()

【讨论】：

感谢您的解释

【解决方案4】：

您正在使用map，就好像它是forEach。不要使用map，除非您打算使用它从回调的返回值创建的数组。使用forEach、for-of 或任何其他方法循环遍历this answer 中描述的数组。

【讨论】：

【解决方案5】：

这只是错误之一：Array.prototype.map() 期望箭头 function.eslintarray-callback-return 的返回值

{cableCars.map((cableCar: typeCblCar) => {
  <CableCar key={cableCar.id} cableCar={cableCar} dispatch={dispatch} />
})}

不起作用，但这个隐式返回完美：

{cableCars.map((cableCar: typeCblCar) => (
  <CableCar key={cableCar.id} cableCar={cableCar} dispatch={dispatch} />
))}

这是我在 TypeScript 中使用 useReducer 的问题。 heremyas给出的答案解决了我的痛苦所以从我过于复杂的解决方法来看，这是纯粹的美。感谢 heremyas，stackoverflow 万岁！

【讨论】：