Question

我是react（javascript）的初学者，正在做todo应用程序，有一个问题，涉及是否在if语句中返回，但是什么也不返回（如果用户什么也不写，然后按Enter键，则不计算在内），但是当我服用它会影响待办事项应用程序的行为。我的问题是 if (!value) { return }这部分代码的含义是什么？
如果没有价值，它将返回什么？为什么取消“返回”会改变todo应用程序的行为？这是代码：

import React, { useState } from 'react';
import './App.css';

function Todo({ tod, index }) {
  return <div className="todo">{tod.text}</div>
}
function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');
  console.log(value)

  const handleSubmit = e => {
    e.preventDefault();
    if (!value) {
      return
    }
    addTodo(value);
    setValue('');

  }

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

      />

    </form>
  )
}

function App() {
  const [todos, setTodos] = useState([
    {
      text: ' Learn by doing',
      isCompleted: false
    }
  ]);

  const addTodo = text => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  }

  return (
    <div className="app">
      <div className="todo-List">
        {todos.map((todo, index) =>
          <Todo key={index} index={index} tod={todo} />
        )}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  )

}
export default App;

在这里，我有javascript代码，试图在其中使用与上述代码（if(!text){ return }相同的语句在这里，无论我是否有“返回”都没有关系，两种方式都是相同的（为什么在前面的示例中这是不同的？）：

function myFunction(text) {
var text=document.getElementById('text').value

event.preventDefault();
console.log(text);

if(!text){
return 
}
else{
document.getElementById('demo').innerHTML = "Text typed: "+text; // if nothing
}}

<form onsubmit="myFunction()">
<input  type="text" id="text" >
</form>

<p id="demo"></p>

英语不是我的母语，所以对不起。

Answer 1

在此处复制有问题的代码

const handleSubmit = e => {
    e.preventDefault();
    if (!value) {
      return
    }
    addTodo(value);
    setValue('');

  }

这被视为null支票。您在该函数内部所说的实际上是“如果此变量为true，请不要继续执行该函数的其余部分并返回未定义状态”。如果您的value变量等于Javascript中的null or undefined的值（附加链接转到SO答案以获取null和undefined之间的差异），那么您的！运算符将再次为if语句（如我上面所述）返回true，而不会运行该函数的其余部分并返回undefined。

在此处查看此代码库，如果您将变量“ shouldRun”从true和false切换为true，则返回后将获取控制台日志，或者返回未定义的返回值：https://codepen.io/kjscott27/pen/wvMbKJb?editors=1111

编辑：我认为也许有必要为null和undefined之间的差异添加其他来源。此外，该资源还提供直接来自ECMA脚本以及进一步阅读here in this other SO answer的两个术语定义的答案。

Answer 2

添加到kjs0的答案中，

在Javascript中，不返回任何值将为undefined。示例：

function myFunc() {
  return;
}

myFunc() // the returned value is undefined

有返回声明，什么也不返回

2 个答案: