Как изменить реквизит и не отразить изменение в родительском - PullRequest
Новая
       4

Как изменить реквизит и не отразить изменение в родительском

0 голосов
/ 25 мая 2018

Я хочу изменить некоторые внутренние свойства реквизита.Реквизиты утверждают, что они неизменны, но когда я изменяю значение, значение состояния родителя меняется. Я читал, что реквизиты являются неизменяемыми.Но изменение значения отражается в родительском. 

class ParentComp extends React.Component {
    constructor(props) {
        super(props);
        let property = {someProperty:'ABCD'};
        this.state={
            myState: property
        }
    }

    render() {
        return(
            <div>
                Parent:{JSON.stringify(this.state.myState)}
                <ChildComp pState={this.state.myState} />
            </div>
        );
    }
}

class ChildComp extends React.Component {
    render() {
        this.props.pState.someProperty = '1234';
        return(
            <div>
                Child:{JSON.stringify(this.props.pState)}
            </div>
        );
    }
}

В конце я вижу, что оба значения изменены на 1234. В онлайн-скриптах это работает как ожидалось (то есть, родительское значение не изменилось.).Но в моем проекте родительский объект изменяется.

Как мне добиться этого сценария использования, в котором я хочу изменить некоторые свойства в реквизитах, а не отражать их в состоянии родителя?

Ответы [ 2 ]

0 голосов
/ 25 мая 2018

Если вы хотите изменить значение реквизита, вы должны сначала вывести реквизиты в состояние, а затем выполнить мутацию в этом состоянии.

Мутирование реквизита не является наилучшей практикой.Таким образом, ваш ChildComp должен выглядеть так: 

class ChildComp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pState: props.pState,
        }
    }

    componentDidMount() {
        const { pState } = this.state.
        pState.someProperty = '1234';
        this.setState({
            pState,
        });
    }

    render() {
        return(
            <div>    
                Child:{JSON.stringify(this.state.pState)}
            </div>
        );
    }
}
0 голосов
/ 25 мая 2018

Я читал, что реквизит неизменен

Это не правда - вы должны относиться к ним как к неизменным.Другими словами, они являются обычными объектами javascript, и вы не должны изменять их.

...