React：箭頭函數需要返回值array-callback-return

Question

我有以下代碼片段，我得到一個錯誤Arrow function expected a return value array-callback-return但我找不到問題。

  render() {
    return (
      <div>
        <Form addCharacter={this.addCharacter} name="Rick" />
        <Input
          onChange={this.filterCharacters}
          placeholder="Filters characters"
        />
        <Container>
          <Row>
            {this.state.characters.map((ch, i) => {
              if (ch.name.contains(this.state.filter_name)) {
                return (
                  <Col>
                    <Card
                      key={i}
                      img={ch.image}
                      rmCharacter={this.rmCharacter}
                      name={ch.name}
                      status={ch.status}
                      gender={ch.gender}
                      episode={this.extractEpisodes(ch.episode)}
                    />
                  </Col>
                );
              } else {
                return;
              }
            })}
          </Row>
        </Container>
      </div>
    );
  }

我在if設置了一個else，以確保我總是返回一些東西，但它似乎不起作用。

非常感謝提前！

Answer 1

當您嘗試映射項目時，問題似乎與地圖有關，但當它轉到其他地方時，您只是在做回報。

我寧願過濾然后映射this.state.characters並刪除內部的if else檢查，而不是map函數中的if else。

this.characters.filter(..).map(..);

Answer 2

你可以這樣做，

          {
            this.state.characters.map((ch, i) => ch.name.contains(this.state.filter_name) &&
                <Col>
                  <Card
                    key={i}
                    img={ch.image}
                    rmCharacter={this.rmCharacter}
                    name={ch.name}
                    status={ch.status}
                    gender={ch.gender}
                    episode={this.extractEpisodes(ch.episode)}
                  />
                </Col>
              )
         }