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>
              )
         }