javascript - 无法使JSX从map()函数中的条件进行渲染

关于这个主题已经有很多问题和答案了，但是我似乎没有从map（）函数中的条件正确地渲染我的JSX。

我从render（）函数调用的函数如下所示：

renderAudiobookChoice(audioBookChoice) {
  if (audioBookChoice === "all") {
    return this.state.audiobooks.map(audiobook => (
      <AudiobookDetail key={audiobook.id} audiobook={audiobook} />
    ));
  }

  if (audioBookChoice === "poetry") {
    this.state.audiobooks.map(audiobook => {
      return audiobook.text_type === 2 ? (
        <AudiobookDetail key={audiobook.id} audiobook={audiobook} />
      ) : null;
    });
  }
}

因此，如果我的audioBookChoice ='all'，则将正确呈现AudiobookDetails。
但是，如果我audioBookChoice ='poetry'，它将不再在屏幕上呈现任何内容。

我的linter给了我以下警告：“预期在箭头函数的末尾返回一个值。（数组回调返回）。”
这让我感到困惑，因为我的印象是我应该在三级操作员的陪同下归还一些东西。

任何帮助将非常感激。

最佳答案

您在poetry部分中缺少返回值：

if (audioBookChoice === 'poetry') {
    return (
      this.state.audiobooks.map(audiobook => {
        return audiobook.text_type === 2 ?
            <AudiobookDetail
                key={audiobook.id} audiobook={audiobook}
            />

        :
            null;
        });
    }
  );
}