通过带有 React 和 Bootstrap 的数组进行映射

Question

我正在尝试使用引导程序将 JSON 从 API 调用映射到返回。我希望名称一一映射到所有列和行，直到显示所有数据。目前，它正在映射所有 3 列中的所有数据（名称）。

componentDidMount() {
    fetch(API + 'ts=' + date + 'apikey=' + pubKey + 'hash=' + hash)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            char: result.data.results,
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }

      )
  }


  render() {
    const { error, isLoaded, char } = this.state;
    return (
      char.map(char => 
        <Container>
          <Row>
          <Col md="4"> <h2>{char.name}</h2></Col>
          <Col md="4"> <h2>{char.name}</h2></Col>
          <Col md="4"> <h2>{char.name}</h2></Col>
          </Row>
        </Container>
      )
    )
  }
}

Answer 1

如果我理解正确，如果您尝试映射所有数据并希望在网格内显示它。 您应该执行以下操作。

render() {
    const { error, isLoaded, char } = this.state;
    return (
        <Container>
          <Row>
           { char.map(char => (<Col md="4"> <h2>{char.name}</h2></Col> ) }
          </Row>
        </Container>
    )
}