React Modal returns 映射数据的最后一个值

Question

较早的答案没有利用地图功能/功能组件，正在努力解决这个问题。当我点击我的卡片时，模态只显示最后一个模态的数据：

export const ModalCard = (props) => {

    const productData = props.data;

    const [modal, setModal] = React.useState(false);
    const toggle = () => setModal(!modal);

    return (
        <Row>
            {productData.map((v, i) => (
                <Col className="py-4 btn" key={i} xs={12} md={4} lg={2}>
                    <div className="pb-4" onClick={toggle}>
                            <div className="product_card_padding">
                                <div className="pt-4">
                                    <span className="card_product_subtitle">{v.headline}</span>
                                </div>
                            </div>

                        <Modal isOpen={modal}
                            toggle={toggle}
                            centered
                        >
                            <ModalBody className="product_modal" onClick={toggle}>
                                <div className="row pt-3 bg_white">
                                    <Col>
                                        <div>
                                            <span className="card_product_subtitle">{v.headline}</span>
                                        </div>
                                    </Col>
                                </div>
                            </ModalBody>
                        </Modal>
                    </div>
                </Col>
            ))}
        </Row>

    );
}

Answer 1

根据您的代码，将打开多个模态框，您将看到最后一个模态框。

如果您有 10 个产品，则将打开 10 个模态框。

我的建议是您需要在 map 函数之外定义一个全局模态，并且您需要定义一个新的状态变量来表示要在模态上呈现的选定产品。

selectedInd 保存要在模态上呈现的数据索引。

const [selectedInd, setSelectedInd] = React.useState(-1);

然后 toggle 函数将更改为设置 -1 以隐藏模式。

const toggle = () => setSelectedInd(-1);

并将模态移到 map 之外。

尝试使用以下代码模式。

export const ModalCard = (props) => {
  const productData = props.data;

  const [selectedInd, setSelectedInd] = React.useState(-1);
  const toggle = () => setSelectedInd(-1);
  const modal = selectedInd >= 0 && (productData && productData.length > selectedInd);

  return (
    <React.Fragment>
      <Row>
          {productData.map((v, i) => (
              <Col className="py-4 btn" key={i} xs={12} md={4} lg={2}>
                  <div className="pb-4" onClick={()=>setSelectedInd(i)}>
                      <div className="product_card_padding">
                          <div className="pt-4">
                              <span className="card_product_subtitle">{v.headline}</span>
                          </div>
                      </div>
                  </div>
              </Col>
          ))}
      </Row>
      {modal && <Modal isOpen={modal} toggle={toggle} centered>
          <ModalBody className="product_modal" onClick={toggle}>
              <div className="row pt-3 bg_white">
                  <Col>
                      <div>
                          <span className="card_product_subtitle">{productData[selectedInd].headline}</span>
                      </div>
                  </Col>
              </div>
          </ModalBody>
      </Modal>}
    </React.Fragment>
  );
}

React Modal returns 映射数据的最后一个值

React Modal returns last value of mapped data

javascript

bootstrap-modal

reactjs