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

反应：箭头函数期望返回值array-callback-return

2 个答案: