Question

我最近一直在学习react js，这里有这段代码，我的导师在其中使用此代码重置状态下的值...

  handleDelete = counterId => {
    const tempCounter = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters: tempCounter });
  };

  reset = () => {
    const resetCounters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState({ counters: resetCounters });
  };

在'handleDelete'函数中，我的家庭教师没有在'tempCounter'变量中返回值，但是在'reset'函数中家庭教师返回了'c'的值，为什么？

Answer 1

this.state.counter.filter()内的箭头函数返回表达式c.id !== counterId的布尔值。当您在声明箭头功能后不加括号“ {}”时，表示箭头“ =>”之后的内容被视为其返回值。

Answer 2

此功能：

  handleDelete = counterId => {
    const tempCounter = this.state.counters.filter(c => c.id !== counterId); // implicit return 
    this.setState({ counters: tempCounter });
  };

OR

handleDelete = counterId => {
  const tempCounter = this.state.counters.filter(c => {
    return c.id !== counterId; // explicit return 
  });
  this.setState({ counters: tempCounter });
};

更多人为的例子：

const people = [
  { name: 'Bob', age: 20 },
  { name: 'Jane', age: 30 },
  { name: 'Mike', age: 40 },
  { name: 'Smith', age: 50 },
];

const under35implicit = people.filter(person => person.age < 35)

// same as 

const under35explicit = people.filter(person => {
  return person.age < 35
})

console.log(under35implicit)

console.log(under35explicit)

这有意义吗？

Answer 3

在箭头函数中，如果箭头后面有一个表达式，它将被隐式返回。如果有花括号，则需要显式的return语句来返回值。您可以将第一个函数重写为：

const tempCounter = this.state.counters.filter(c => {
    return c.id !== counterId
});

但是第一种方法更简洁。

第二个函数也可以颠倒以使用显式返回，使用扩展：

const resetCounters = this.state.counters.map(c => ({ ...c, value: 0 }));

我们需要将对象包装在括号中，否则它将变成花括号中包含的函数主体。

Answer 4

仔细观察！返回值c不是函数reset的返回值，而是函数c => { c.value = 0; return c; }的返回值，您在this.state.counters.map中将其用作参数。

对此进行了澄清，函数reset和handleDelete均未返回任何值。它们甚至不必，因为它们很可能用作事件处理程序（单击按钮等）。因此，它们自己通过this.setState触发状态更改。

什么时候返回函数的值？

4 个答案: