反应打字稿解析错误：“{”预期

Question

我正在使用 react + typescript 并收到此错误。 解析错误：“{”期望如何修复它？。

这是我的代码片段

  render() {
    console.log(this.state.collection);
    return (
      <div className='body-container'>
        <Container>
          {this.collection.items.map(collection => {
              <Card>
                <Card.Image>
                  <Image.Container size='3by4'>
                    <Image src=collection.coverLink />
                  </Image.Container>
                </Card.Image>
              </Card>
            });
          }
        </Container>
      </div>
    );
  }

Answer 1

解析错误：“{”预期

您需要将属性包装在{

  render() {
    console.log(this.state.collection);
    return (
      <div className='body-container'>
        <Container>
          {this.collection.items.map(collection => {
            <Card>
              <Card.Image>
                <Image.Container size='3by4'>
                  <Image src={collection.coverLink} /> {/*fix here*/}
                </Image.Container>
              </Card.Image>
            </Card>
          })} {/*another fix here*/}
      </Container>
      </div>
    );
  }

还删除了分号;)。

Answer 2

请删除;

  render() {
    console.log(this.state.collection);
    return (
      <div className='body-container'>
        <Container>
          {this.collection.items.map(collection => {
              <Card>
                <Card.Image>
                  <Image.Container size='3by4'>
                    <Image src=collection.coverLink />
                  </Image.Container>
                </Card.Image>
              </Card>
            }); // Remove ;
          }
        </Container>
      </div>
    );
  }

Answer 3

尝试将 {} 更改为 ()

render() {
    console.log(this.state.collection);
    return (
      <div className='body-container'>
        <Container>
          {this.collection.items.map(collection => (
              <Card>
                <Card.Image>
                  <Image.Container size='3by4'>
                    <Image src=collection.coverLink />
                  </Image.Container>
                </Card.Image>
              </Card>
            ))
          }
        </Container>
      </div>
    );
  }

或者在 return() 里面制作 Card

render() {
    console.log(this.state.collection);
    return (
      <div className='body-container'>
        <Container>
          {this.collection.items.map(collection => {
              return(
              <Card>
                <Card.Image>
                  <Image.Container size='3by4'>
                    <Image src=collection.coverLink />
                  </Image.Container>
                </Card.Image>
              </Card>
              )
            })
          }
        </Container>
      </div>
    );
  }

Answer 4

首先，您需要在 Image 组件的 prop 周围添加{} ，如下所示： <Image src={collection.coverLink} /> 。

森康迪，您没有从地图中的函数返回任何内容。

错误的：

{this.collection.items.map(collection => {
    <Card>
      <Card.Image>
        <Image.Container size='3by4'>
          <Image src={collection.coverLink} />
        </Image.Container>
      </Card.Image>
    </Card>
  });
}

好的：

{this.collection.items.map(collection => (
    <Card>
      <Card.Image>
        <Image.Container size='3by4'>
          <Image src={collection.coverLink} />
        </Image.Container>
      </Card.Image>
    </Card>
  ));
}

或者：

{this.collection.items.map(collection => {
    return (
      <Card>
        <Card.Image>
          <Image.Container size='3by4'>
            <Image src={collection.coverLink} />
          </Image.Container>
        </Card.Image>
      </Card>
    );
  });
}

Answer 5

你错过了花括号，添加以下内容

用它来包装“src”属性的值

 <Image src={collection.coverLink} />