javascript 如何使用reactjs修复“期望在箭头函数中返回值”?

ncgqoxb0  于 2023-04-19  发布在  Java
关注(0)|答案(8)|浏览(336)

我的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函数上的同一行
我该怎么解决?

oo7oh9g9

oo7oh9g91#

将{}更改为()对我很有效
map(() => {})map(() => ())

8wigbo56

8wigbo562#

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

h22fl7wq3#

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()

nqwrtyyt

nqwrtyyt4#

你使用map就好像它是forEach一样。不要使用map,除非你要使用它从回调函数的返回值创建的数组。使用forEachfor-of,或本答案中描述的许多其他方法来循环数组。

w9apscun

w9apscun5#

如果你需要返回一个数组,但也需要在循环中放置条件,这样一些项目可能不会被返回,你可以像这样合并.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()}
      </>
    );
  }
}
t40tm48m

t40tm48m6#

当你迭代一个map时,你需要为每次迭代返回一些东西,所以我建议做以下修改:

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

或者干脆

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

nwnhqdif7#

这只是一个错误:Array.prototype.map()需要箭头函数返回值。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万岁!

bxjv4tth

bxjv4tth8#

只需将{}更改为()
在React应用程序中,“map”通常用于将组件呈现为返回值。就像在这个例子中使用圆括号表示直接返回调用。

previewPosts?.map((post, i) => (
    <PostCard key={post.id} {...{post, num: i }} />
))

或者像这样使用带有显式返回调用的方括号。

previewPosts?.map((post, i) => {
    return (
        <PostCard key={post.id} {...{post, num: i }} />
    )
})

如果您使用这两种技术都没有返回任何内容,则会抛出“Expected a return value in arrow function”错误。

相关问题