我可以在 JavaScript 中省略箭头函数中的返回值吗？

Question

I've been struggled from this for a long time. we all know that arrow function simplifies the syntax, like this:

A. Arrow function:

        onClick={() => toggleTodo(todo.id)}

B. Expand the Arrow function:

        onClick={() => {
           // we can see there is a return keyword here. can I just remove the return keyword ? 
           return toggleTodo(todo.id); 
           ^^^^^^
        }}

In the official redux tutorial, the file AddTodo.js :

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

const AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {                   // focus on this line
          e.preventDefault()
          dispatch(addTodo(input.value)).  // focus on this line, if i put return here, the code below won't be executed. if not, how to explain the syntax in the beginning?
          input.value = ''
        }}
      >
        <input ref={node => (input = node)} />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )
}

export default connect()(AddTodo)

The question is: in the onSubmit , why we don't need to put a return inside the function body ? Thank you.

Answer 1

You only need to return something if that returned value will be used somewhere. In the case of onSubmit , there is no need to return anything. That (arrow) function is simply running some code when the form is submitted.

In point B in your question, yes, you can remove return if nothing needs to be done with the returned result of toggleTodo(todo.id) .

Answer 2

They are both arrow functions

onClick={() => toggleTodo(todo.id)}

Short version

 onClick={() => { toggleTodo(todo.id); }}

Long version

 onClick={() => { toggleTodo(todo.id); toggleTodo2(todo.id); toggleTodo3(todo.id); }}

Long version can have multiple calls, return not required

Answer 3

You need a return value when you use a synchronized function and need its result.

Whenever you use an asynchronous function, it means that the calling function already continued with itself and moving to the next phase will be via a callback function.

In your case the window object is the caller of the onClick , so there's no reason to return a value to it, it will have nothing to do with it.

You do want to trigger react's rendering mechanism so you use the dispatch callback/trigger.