如何使用 reactjs 修复“预期在箭头函数中返回值”？

Question

I have two function in my react-app components

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);
            })
        })
    }

When I run it, I get:

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

Such as the Line 26 is beginning Object.keys(this.props.praticiens).map((praticien) => { on componentDidMount and Line 36 is the same line on the handleChangePraticien function

How can I fix it?

Answer 1

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

Since you do not care about returning a value from the arrow function and you are not using the array returned by the map() , you should be using forEach() function instead.

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 2

Changing {} to () worked for me

from map(() => {}) to map(() => ())

Answer 3

The Array.prototype.forEach() and Array.prototype.map() are used for two differents purposes.

• Array.prototype.forEach()

The Array.prototype.forEach is used to simply loop over an array's items but doesn't return any special value. Its signature is:

forEach(callback, [thisArg]) => undefined

Only the first argument callback is mandatory and its signature is (current [, index, array]) => void where the only required argument is current

Example

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

• Array.prototype.map()

This function is mostly used to create a new Array from an other one. Unlike the forEach function, it returns an Array . Its signature is the following:

forEach(callback [, thisArg]) => Array . Just like forEach , only the first argument is mandatory but the callback signture is different: (current [, index, array]) => any . The final array will contain every value returned by the callback after each iteration.

Example

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

More informations over there:

Array.prototype.forEach()

Array.prototype.forEach()

Answer 4

You're using 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 5

this is just one of Errors: Array.prototype.map() expects a return value from arrow function.eslintarray-callback-return

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

Does not work, but this implicite return works perfect:

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

This was my problem with useReducer in TypeScript. The answer gived by heremyas solve my agony So from my over-complicated workaround this is pure beauty. Thanks heremyas and long live stackoverflow!

Answer 6

Problem: Array.prototype.map() expects a return value from arrow function array-callback-return

Solution: You can find Solution Here: https://youtu.be/o6GYl3nlIcI

Answer 7

If you need to return an array, but also place conditionals in the loop so that some items may not be returned you can combine .forEach with .push like this:

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()}
      </>
    );
  }
}

Answer 8

you need to return something for each iteration when you iterate a map, so i suggest to make these alterations.

list.map(() => {
   return (
    // block of code to be executed
   )
})

or simply

list.map(() => (
    // block of code to be executed
))