没有返回语句的函数返回（反应）答案

【问题标题】：a function with no return statement returns (react)没有返回语句的函数返回（反应）
【发布时间】：2020-07-26 22:21:33
【问题描述】：

react(javascript) 初学者在这里，没有返回语句的函数不应该给出 'undefined' 吗？在函数内部调用另一个函数如何仍然需要返回语句（在其他地方没有找到这个信息）？

例如，这段代码在有和没有返回语句的情况下工作并且没有给出'undefined'的原因是什么？

function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');

  const handleSubmit = e => {
    e.preventDefault();
   //for example this function does not have a return statement and still works
   // even if i put return statement it will still work 
   // like this return addTodo(value) ?
    addTodo(value);
    setValue('');
  }
  console.log(value);

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        placeholder="Add Todo..."
        onChange={e => setValue(e.target.value)}

      />
    </form>
  )

}

【问题讨论】：

您能否提供一些背景信息 - 您预期会发生什么？你来自不同的语言吗？我之所以问，是因为我不知道 return 语句的不同行为，除非我误解了这个问题:)。
函数可以在没有return 声明的情况下影响外部环境，这就是你的函数正在做的事情。

标签： javascript html reactjs forms function

【解决方案1】：

函数不必返回任何内容。在这种情况下，它们将被视为void 类型的函数。

const returnArgument = argument => {
 return argument;
};
console.log(returnArgument('foo')); // logs 'foo'

const voidFunction = argument => {
 returnArgument(argument);
};
console.log(voidFunction(argument)); // logs undefined

const doubleReturn = argument => {
 return returnArgument(argument);
};
console.log(doubleReturn('foo')); // logs 'foo'

但是，无论函数是否返回某些内容，并不意味着它们不能更改某些状态或具有任何其他广泛定义的side-effects。如果您想了解更多关于函数、纯函数和副作用的信息，那么我建议您将this article 作为与 JavaScript 相关的入口点。

回到你的例子 - 即使你的 handleSubmit 没有 return 语句，它也执行一些其他被认为是 side-effects 的操作：

它调用函数addTodo，因此改变了一些外部状态
它调用函数setValue，改变用useState钩子定义的本地状态

这就是代码有效的原因。

【讨论】：

【解决方案2】：

您是否将handleSubmit 函数的定义与对e => {} 的调用混淆了？请注意 e => {} 是 handleSubmit 函数。

如果您发布的代码看起来令人困惑，那么最好将其重写如下，这与（几乎）完全相同的代码：

function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');

  function handleSubmit (e) {
    e.preventDefault();
   //for example this function does not have a return statement and still works
   // even if i put return statement it will still work 
   // like this return addTodo(value) ?
    addTodo(value);
    setValue('');
  }
  console.log(value);

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        placeholder="Add Todo..."
        onChange={e => setValue(e.target.value)}

      />
    </form>
  )

}

【讨论】：