时间戳

首页 > 解决方案 > 映射的嵌套组件无法正常工作（React Js）

javascript - 映射的嵌套组件无法正常工作（React Js）

问题描述

我有一个映射到要显示在我的“allItems”页面上的项目列表。现在每个 Item 都有一个按钮，可以启动一个带有该项目规格的模式，但是这个模式为所有项目（数组中的最后一个）显示相同的值。我试图在切换函数中传递 id，但它不起作用。

任何人都知道如何在卡片和模态中显示相同的数据？

这是我的代码：

 state = {
        modal: false,
    }

    toggle = () => {
        this.setState({
            modal: !this.state.modal
        })
    }
 render(){
 return(
 {rooms.map(({ _id, name, descr, prezzo }) => (
                        <>
                        <Card key={_id} className="rooms-card-template">
                            <CardImg />
                            <CardBody>
                                <CardTitle>{name}</CardTitle>
                                <CardText>{descr}</CardText>
                                <CardSubtitle>{prezzo}$/notte</CardSubtitle>
                                <Button onClick={this.toggle}>Apri Annuncio</Button>
                                
                                <Modal isOpen={this.state.modal} toggle={this.toggle}>
                                    <ModalHeader >{name}</ModalHeader>
                                    <ModalBody>
                                        {descr}
                                        <h5 style={{ paddingTop: "10px"}}>Riepilogo prenotazione</h5>
                                        <Form>
                                            <FormGroup>
                                                <Label>Struttura:</Label>
                                                <Input value={name}/>
                                            </FormGroup>
                                            <FormGroup>
                                                <Label>Ospiti:</Label>
                                                <Input type="select"name="ospiti" id="ospiti">
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                    <option>6</option>
                                                    <option>7</option>
                                                    <option>8</option>
                                                    <option>9</option>
                                                </Input>
                                            </FormGroup>
                                            <FormGroup>
                                                <Label>Check in</Label>
                                                <Input type="date" name="checkin-date" id="checkin-date" placeholder="Check in" />
                                            </FormGroup>
                                            <FormGroup className="rooms-checkout">
                                                <Label>Check out</Label>
                                                <Input type="date" name="checkout-date" id="checkout-date" placeholder="Check out" /> 
                                            </FormGroup>
                                            { isAuth ? userAuth : userUnauth }
                                        </Form>
                                    </ModalBody>
                                </Modal>
                            </CardBody>
                        </Card>

                        </>
                    ))}
)
}

标签： javascriptreactjscomponents

解决方案

问题

您有一个布尔modal状态，所有模态都从中提示。当this.state.modal为 true 时，将为每个被映射的元素呈现和打开一个模式。

解决方案

与其存储一个是否应该打开模态的布尔值，不如存储一个id当您希望打开特定模态时的值。

state = {
  modal: null // <-- null, non-id state value
};

toggle = (id) => () => { // <-- curried function handler
  this.setState((prevState) => ({
    modal: prevState.modal === id ? null : id // <-- set new id or toggle off
  }));
};

render() {
  return (
    <>
      {rooms.map(({ _id, name, descr, prezzo }) => (
        <Card key={_id} className="rooms-card-template">
          ...
          <CardBody>
            ...
            <Button
              onClick={this.toggle(_id)} // <-- pass id
            >
              Apri Annuncio
            </Button>

            <Modal
              isOpen={this.state.modal === _id} // <-- open if id is match
              toggle={this.toggle(_id)} // <-- pass id
            >
              ...
            </Modal>
          </CardBody>
        </Card>
      ))}
    </>
  );
}

推荐阅读