多个子组件获得相同的 prop 值

Question

我有两个自定义的 class 组件，我从中创建了两个实例，例如：

<PersonAddModal details={details} open={open} setOpen={setOpen} addFather={false}/>

所以addFather属性不同，rest是一样的。

PersonAddModal如下所示。 （尽管添加父亲/添加母亲文本正确显示，具体取决于 addFather 的 val）

import React from 'react'
import { Modal } from 'react-responsive-modal';


class PersonAddModal extends React.Component 
{
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }



    handleSubmit(event)
    {
    //...
    }
    
    getParentTypeString()
    {
        return this.props.addFather ? "father" : "mother";
    }

    render() {
        return(
    <div>
        <button onClick={() => this.props.setOpen(true)}>{this.props.addFather ? <div>Add father</div>:<div>Add mother</div>}</button>
                                    <Modal open={this.props.open} onClose={() => this.props.setOpen(false)}>
                                        <h1>Add a {this.getParentTypeString()} of {this.props.details.firstName}</h1>
                                        <form onSubmit={(event) => {this.handleSubmit(event)}}>
                                        <input type="text" id="firstName" name="firstName" placeholder="Enter first name" required/>
                                        <input type="text" id="lastName" name="lastName" placeholder="Enter last name" required/>
                                        <button type="submit">Submit</button>
                                        </form>
                                    </Modal>
    </div>
        )};
}

export default PersonAddModal;

我真的不明白为什么（显然）最新添加的组件的 addFather 的 val 似乎也用于第一个组件。 他们不是应该相互独立吗？ 非常感谢您的帮助！

编辑：他们;正在使用如下：

import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import 'react-responsive-modal/styles.css';
import { Modal } from 'react-responsive-modal';
import PersonLink from './PersonLink'
import PersonAddModal from './PersonAddModal'

const PersonDetails = ({ match }) => {



    const [details, setDetails] = React.useState({});
    const [isLoading, setIsLoading] = React.useState(true);
    const [open, setOpen] = React.useState(false);

    React.useEffect(() => {
        fetch(`https://localhost:44332/api/person/${match.params.id}/details`)
            .then(response => response.json())
            .then((data) => { setDetails(data); setIsLoading(false); });


    }, [match.params.id])

    return (
        <>
            {
                (isLoading || details.id == null) ? <h1>Loading..</h1>
                    :
                    <>
                        <h1>Person Details of {details.firstName} {details.lastName}</h1>
                        <h2>Parents </h2>
                        {
                            details.father != null && details.father != 0 ?
                            <PersonLink id={details.father  } />
                                :
                                <>
                                    <PersonAddModal details={details} open={open} setOpen={setOpen} addFather={true}/>
                                </>
                        }
                        {
                            details.mother != null && details.mother != 0 ?
                                <PersonLink id={details.mother} />
                                :
                                <PersonAddModal details={details} open={open} setOpen={setOpen} addFather={false}/>
                        }
                        {details.spouse != 0 ?
                            <>
                                <h2>Spouse</h2>
                                <PersonLink id={details.spouse}/>
                            </>
                            : <></>}
                        <h2>Siblings</h2>
                        {
                            details.siblings.map((sibling) => (<PersonLink id={sibling} />))
                        }
                        <h2>Children</h2>
                        {
                            details.children.map((child) => (<PersonLink id={child} />))
                        }
                    </>
            }



        </>
    );
};


export default PersonDetails;

Answer 1

我找到了答案：

如您所见，我正在创建两个模态框，而我的问题是两者都显示相同的内容。 事实证明，因为我给了他们两个相同的 state（打开/设置打开），所以无论我点击哪个，打开的总是相同的。