Question

关于此主题的问题和答案已经存在很多，但是我似乎无法从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给了我以下警告：“预期在箭头函数的末尾返回一个值。（数组回调返回）。” 这让我感到困惑，因为我的印象是我应该跟随三级操作员归还一些东西。

任何帮助将不胜感激。

Answer 1

您在poetry部分中缺少回报：

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

        : 
            null;
        });
    }
  );
}

Answer 2

您不会在第二个if语句内返回结果。

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

Answer 3

因为您不再返回数组的映射。

使用此：

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

Answer 4

您缺少返回声明，请更改为

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

无法使JSX从map（）函数中的条件渲染

4 个答案: