React Childs 組件更改他的父母 state

Question

我正在從事我的第一個更大的 React 項目，發現了這個我不知道如何解決的錯誤/功能。

問題

我想通過模態編輯用戶。 我打開它，但是當我在該字段中更改某些內容時，父組件 state 也會更改。 子組件正在更改父組件 state 而未通過 function。

我的做法

我嘗試更改變量名稱，因為我認為不可能更改父組件 state。然后我在 state 更改時開始記錄。 在 handle change 中第一次調用this.props.log()時，state 被更改。

父組件

class UserAdminPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            performingAction: false,
            editorIsOpened: false,
            selectedUser: {}
        }
    }

    componentDidMount() {
        userService.getAll().then(res => {
            const users = res;
            this.setState({users});
        })
    }

    openEditModal = id => {
        const user = this.state.users.filter(u => u.id === id)[0];
        this.setState({selectedUser: user}, () => {
            this.setState({editorIsOpened: true})
            console.log("Selected user", this.state.selectedUser);
        });
    }
    closeModal = () => {
        console.log("Close values",this.state.users, this.state.selectedUser);

        /*if (!save) {
            console.log("Throwing away");
            this.setState({editorIsOpened: false});
            return;
        }
        console.log("Saving");
        this.setState({editorIsOpened: false});*/
    }
    log = ()=>{
        console.log("Logged user",this.state.users);
    }

    render() {
        const {users} = this.state;
        return (
            users ? (
                <React.Fragment>
                    <MDBRow className={"my-5"}/>
                    <UserTable users={users} openEditModal={this.openEditModal}
                               performingAction={this.state.performingAction}/>
                    {this.state.editorIsOpened && <UserEditorModal user={this.state.selectedUser}
                                                                   closeModal={this.closeModal} log={this.log}/>}
                </React.Fragment>
            ) : (
                <LaunchScreen/>
            )
        )
    }
}

和孩子

class UserEditorModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedUser: props.user
        }
        console.log("Modal user",this.state.selectedUser)
    }

    handleChange = (e) => {
        this.props.log();//here is different output
        const [field, value] = [e.target.name, e.target.value]
        const parsedValue = parseInt(value)
        const user = this.state.selectedUser;
        user.hasOwnProperty(field) ? user[field] = isNaN(parsedValue)?value:parsedValue : console.error(`${field} not found on ${user}`);
        this.setState({selectedUser:user});
        this.props.log();
    }

    render() {
        const user = this.state.selectedUser;
        const modal = true;
        return (
            <React.Fragment>
                <MDBModal isOpen={modal} toggle={() => this.props.closeModal(null, false)} fullHeight
                          position="right">
                    <MDBModalHeader toggle={() => this.props.closeModal()}>User editor</MDBModalHeader>
                    <MDBModalBody>
                        <MDBRow>
                            <MDBCol size="3">
                                <MDBInput type='number' name="karma" label="Karma" value={user.karma}
                                          onChange={e => this.handleChange(e)}/>
                            </MDBCol>
                            <MDBCol size="3">
                                <MDBInput type='number' name="money" label="Money" value={user.money}
                                          onChange={e => this.handleChange(e)}/>
                            </MDBCol>
                            <MDBCol>
                                <MDBInput type="text" value={user.email} disabled/>
                            </MDBCol>
                        </MDBRow>
                        <MDBRow>
                            <MDBCol size="md">
                                <MDBInput type='text' name="firstName" label="First name" value={user.firstName}
                                          onChange={e => this.handleChange(e)}/>
                            </MDBCol>
                            <MDBCol size="md">
                                <MDBInput type='text' name="lastName" label="Last name" value={user.lastName}
                                          onChange={e => this.handleChange(e)}/>
                            </MDBCol>
                        </MDBRow>
                    </MDBModalBody>
                    <MDBModalFooter>
                        <MDBBtn color="secondary"
                                onClick={() => this.props.closeModal()}>Close</MDBBtn>
                        <MDBBtn color="primary" onClick={() => this.props.closeModal()}>Save
                            changes</MDBBtn>
                    </MDBModalFooter>
                </MDBModal>
            </React.Fragment>
        );
    }
}```
I must missing something but couldnt find it. Hope you can find it and help me once again

Answer 1

猜想是因為你正在使用引用來更改 state。所以最終當你更改子組件的 state 時，父組件的 state 也會更改但父組件不會重新渲染。

constructor(props) {
        super(props);
        this.state = {
            selectedUser: {...props.user}
        }
        console.log("Modal user",this.state.selectedUser)
    }

嘗試在您的孩子身上使用它。