React：箭头函数需要返回值array-callback-return

Question

I have the following snipper of code and I get an error Arrow function expected a return value array-callback-return but I can't find the problem out.

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

I set an else in the if to make sure I'm always returning something, but it doesn't seem to work.

Thanks a lot in advance!

Answer 1

The problem appears to be with the map as you're trying to map items but when it goes to else, you're just doing a return.

Instead of an if else in the map function, I'll rather filter and then map on this.state.characters and remove the internal if else check.

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

Answer 2

you can do like this,

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