React子组件中的道具缺少对象

Question

我是React的初学者，所以请对我有耐心。）

我有一个父组件，它有两个不同的按钮，可以触发子组件，子组件是一个模态，根据哪个按钮触发了模态，子组件内部必须显示不同的内容。这两个组件都是功能组件。子模式应该通过道具从父模式接收触发按钮的值。该按钮的名称是一个数字，对应于子组件中定义的数组中的对象索引。

当我安慰的时候。记录道具，我看到它们被传递到模态三次。第一次按钮的值确实通过道具传递，但在第二段和第三段的道具中它消失了，我得到一个错误，称为TypeError:Cannotread property'inf1'，of undefined。

我无法理解为什么道具会经过三次，为什么第一次之后按钮的值会从道具中消失。

这是我的密码：

起源：

import React, { useState } from "react";
import Container from "react-bootstrap/Container";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import ExperienceModal from "./ExperienceModal";

function Experience() {

    const [modalShow, setModalShow] = useState({
        value: false,
        bname: "0"
    });

    function defineModal(event) {
        event.preventDefault();
        setModalShow({ value: true, bname: event.target.value });
    }

    function hideModal(event) {
        event.preventDefault();
        setModalShow({ value: false, bname: "0" });
    }

    return (

        <Container fluid>
            <Col>
                <Button value="1" onClick={defineModal}>
                    More Information
        </Button>
                {""}
            </Col>
            <Col>
                <Button value="2" onClick={defineModal}>
                    More Information
        </Button>
                {""}
            </Col>
            <ExperienceModal
                onHide={hideModal}
                show={modalShow.value}
                mshow={modalShow.bname}
            />
        </Container>


    );
}

export default Experience;

儿童：

import React from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

function ExperienceModal(props) {

    const x = props.mshow;
console.log(props.mshow);
    
    const modalContent = [
        {
            inf1: "text0",
            inf2: "comment0",
            inf3: "remark0"
        },
        {
            inf1: "text1",
            inf2: "comment1",
            inf3: "remark1"
        },
        {
            inf1: "text2",
            inf2: "comment2",
            inf3: "remark2"
        }
    ];

    return (

        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            animation="true"
            backdrop="static"
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Additional Information
        </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <h4>Centered Modal</h4>
                <p>{modalContent[x].inf1}</p>
                <p>{modalContent[x].inf2}</p>
                <p>{modalContent[x].inf3}</p>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide} variant="success">
                    Close
        </Button>
            </Modal.Footer>
        </Modal >
    );
}

export default ExperienceModal;

这是我的沙盒的链接：https://201vz.csb.app/

这是一个来自浏览器控制台的屏幕截图，因为沙盒控制台仅显示一个按钮值正确的道具交付，但我仍然得到相同的错误：

谁能帮帮我，这个错误快把我逼疯了！谢谢

Answer 1

您已经从多个组件调用了体验模式，并且只从体验传递了适当的道具

<ExperienceModal
  show={modalShow.value}
  onHide={() => setModalShow({ value: false, bname: "0" })}
  mshow={modalShow}
/>

而不是来自E1

// mshow is missing here
<ExperienceModal show={modalShow} onHide={() => setModalShow(false)} />

所以只需添加条件来检查道具是否存在。

//check for mshow
const x = props.mshow ? props.mshow.bname : 0; // default 0 if no props

我在沙盒中修复了：https://9nfih.csb.app/

还有其他警告，所以考虑解决这些问题。