如何用 reactjs 修复 "Expected to return a value in arrow function"？

Question

我的 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行开始Object.keys(this.props.praticiens).map((praticien) => {在componentDidMount和第36行在handleChangePraticien函数上是同一行

我该如何解决？

Answer 1

您正在使用 map as though it were forEach. Don't use map unless you're going to use the array it creates from the return values of the callback. Use forEach, for-of, or any of the many other ways to loop through arrays described in this answer。

Answer 2

Line 26:64: Expected to return a value in arrow function 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);
            })
        })

Answer 3

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

Array.prototype.forEach()

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

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。与 forEach 函数不同，它 return 是一个 Array。它的签名如下：

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

例子

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

更多信息在那边：

Array.prototype.forEach()

Array.prototype.map()

Answer 4

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

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

Answer 5

这只是其中一个错误：Array.prototype.map() 需要来自箭头 function.eslintarray-回调-return

的 return 值

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

不起作用，但是这个隐式 return 完美地工作：

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

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

Answer 6

如果您需要 return 一个数组，但还要在循环中放置条件，以便某些项目可能不会被 return 编辑，您可以将 .forEach 与 .push 像这样：

class Profiles extends Component {
  profilesArray() {
    let profiles_array = [];

    this.props.profiles.forEach((profile) => {
      // some condition
      if (profile.id !== this.props.whatever) {
        profiles_array.push(
          <ContentCard key={profile.profile_id}>
            <p>My Content</p>
          </ContentCard>
        );
      }
    });

    return profiles_array;
  }
  render() {
    return (
      <>
        <h1>Profiles</h1>
        {this.profilesArray()}
      </>
    );
  }
}

如何用 reactjs 修复 "Expected to return a value in arrow function"？

How to fix "Expected to return a value in arrow function" with reactjs?

javascript

object

reactjs

eslint

arrow-functions