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

Posted 2023-02-22

【中文标题】如何用reactjs修复“预计在箭头函数中返回一个值”？

【英文标题】：How to fix "Expected to return a value in arrow function" with 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 - 单个语句，而不是单行。它们都是单一的陈述。 （也就是说，我更喜欢总是在控制流状态上使用。）

【参考方案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，*** 万岁！