当您{}在箭头函数中打开一个块时，return不再暗示 。

你必须写下来：

this.state.articles.filter((article) => {
  return article.category === filter 
})

Javascript ES6 箭头函数以一种特定的方式工作，最好通过一个例子来描述：

let multiply1 = (number) => number * 2;
// When we are returning one value we can put this expression on the same line

// this is the same as:
let multiply2 = (number) => { return number * 2};

//when we have 1 argument we can omit the parentheses
let multiply3 = number => number * 2;


// When we want to write multiple line we have to put brackets like this:
let multiply4 = (number) => { 
console.log('inside arrow function');
return number * 2;
};

console.log(multiply1(2));
console.log(multiply2(2));
console.log(multiply3(2));
console.log(multiply4(2));

当箭头函数返回一个表达式时，不必显式地编写return语句和方括号是非常方便的{}。这允许更简洁的代码。

() => {…} 与 () => 有何不同

+----+--------------------------------+---------------------------------------+
| #  | Using curly brace              | Without curly brace                   |
+-------------------------------------+---------------------------------------+
| 1. | Needs explicit return          | Returns the statement implicitly      |
| 2. | `undefined` if no return used  | Returns the value of expression       |
| 3. | return {} // ok                | {} // buggy, ({}) // ok               |
| 4. | Useful for multi-line code     | Useful for single line code           |
| 5. | Okay even for single line      | Buggy for multi line                  |
+----+--------------------------------+---------------------------------------+

以下是上述差异的示例：

示例：1

// Needs explicit return
() => {
  return value
}
// Returns the value
() => value

示例：2

// Returns undefined
() => {
  1 == true
}
// Returns true
() => 1 == true // returns true

示例：3

// ok, returns {key: value}
() => {
  return {key: value}
}
// Wrap with () to return an object
() => {key: value} // buggy
() => ({key: value}) // ok

示例：4

// Useful for multi-line code
() => {
  const a = 1
  const b = 2
  return a * b
}
// Useful for single line code
() => 1 * 2 

示例：5

// Okay even for single line code
() => { return 1 }
// Buggy for multi-line code
() => const a = 123; const b = 456; a + b; // buggy
() => 
     const a = 123
     const b = 456
     a + b // still buggy

使用过滤功能时，需要return语句通过测试：

包含通过测试的元素的新数组。如果没有元素通过测试，将返回一个空数组。

因此，使用 form () =>，您隐式返回值，它将通过测试并正常工作。但是当您使用 时() => {...}，您没有明确返回该语句，并且不会按您预期的那样工作。它只是返回一个空对象。

因此，要使您的代码按预期工作，您应该使用 return 语句：

this.state.articles.filter((article) => {
  return article.category === filter 
})

PS：我使用了隐式和显式两个词，在 JavaScript 方面究竟是什么？

隐式意味着 JavaScript 引擎为我们做这件事。明确意味着我们需要做我们想做的事。我们可以在任何方面认为相似。

不同之处在于，当您使用 时() => x，它的真正含义是() => { return x }，因此语句article.category === filter本身不执行任何操作，{ article.category === filter }也不显式返回任何内容。