return 语句中的 TypeScript 列表迭代答案

【问题标题】：TypeScript list iteration inside return statementreturn 语句中的 TypeScript 列表迭代
【发布时间】：2022-12-05 04:33:17
【问题描述】：

我是 React-TypeScript 的新手，想制作一个 Publisher 类型对象的可视化列表，它应该如下所示： the screenshot of my javascript code which can list my objects properly inside return statement

这是我的返回语句，它使用 TypeScript 编码但不起作用。它不会给出任何错误，但会给出全白屏。

return (
        <div>
        <input type="text" placeholder='Name' className='input_box' onChange={(i) => searchFor(i)} />
            <div className="container" >
                {publishers.map((publisher:Publisher) =>
                    <Card border="secondary" style={{ width: '18rem',  maxWidth: 'auto', height: 'auto',  maxHeight: 'auto', margin: 15, background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)' }}>
                        <Card.Img style={{ width: "auto", maxHeight: "200px", padding: '5px' }} variant="top" src={img}/>
                        <Card.Body>
                            <Card.Title key="{publisher_name}">{publisher.name}</Card.Title>
                            <ListGroup variant="flush" style={{ listStyle: 'none'}}>
                                <ListGroup.Item key="{website}">{publisher.website}</ListGroup.Item>
                                <ListGroup.Item key="{phone}">{publisher.phone}</ListGroup.Item>
                                <ListGroup.Item key="{address}">{publisher.address}</ListGroup.Item>
                            </ListGroup>
                        </Card.Body>
                    </Card>  
                    )
                }
            </div>
        </div>
    );

我很确定 publishers 不为空，因为我在 javascript 文件中尝试了这种代码并截取了上面的屏幕截图。你能帮我如何在这个return声明中列出我的对象吗？我也试过 foreach 但也没有成功。

注意：您可能需要查看我的 Publisher 类。这里是：

export class Publisher {
    name: string = "";
    website: string = "";
    phone: string = "";
    address: string = "";
  
    constructor(initializer?: any) {
      if (!initializer) return;
      if (initializer.name) this.name = initializer.name;
      if (initializer.website) this.website = initializer.website;
      if (initializer.phone) this.phone = initializer.phone;
      if (initializer.address) this.address = initializer.address;
    }
}

【问题讨论】：

标签： typescript iteration react-typescript tsx

【解决方案1】：

您在代码中的 ListGroup.Item 元素上使用了 key 属性，但没有为每个键提供唯一值。它会导致 React 组件渲染不正确，显示空白屏幕。

return (
  <div>
    <input type="text" placeholder="Name" className="input_box" onChange={(i) => searchFor(i)} />
    <div className="container">
      {publishers.map((publisher: Publisher) => (
        <Card
          border="secondary"
          style={{
            width: "18rem",
            maxWidth: "auto",
            height: "auto",
            maxHeight: "auto",
            margin: 15,
            background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
          }}
        >
          <Card.Img
            style={{ width: "auto", maxHeight: "200px", padding: "5px" }}
            variant="top"
            src={img}
          />
          <Card.Body>
            <Card.Title key={publisher.name}>{publisher.name}</Card.Title>
            <ListGroup variant="flush" style={{ listStyle: "none" }}>
              <ListGroup.Item key={`${publisher.name}-website`}>
                {publisher.website}
              </ListGroup.Item>
              <ListGroup.Item key={`${publisher.name}-phone`}>
                {publisher.phone}
              </ListGroup.Item>
              <ListGroup.Item key={`${publisher.name}-address`}>
                {publisher.address}
              </ListGroup.Item>
            </ListGroup>
          </Card.Body>
        </Card>
      ))}
    </div>
  </div>
);

【讨论】：