Question

我在React中遇到一些麻烦。我找不到一种方法来保持基本状态（来自父母的道具的收益）和动态状态（由用户管理）。让我解释一下：

我有两个组成部分：父母与子女。其中：

Parent.js

class Parent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            children: []
        }
    }

    // Called some back-end service
    getData(){
        let arr = Array.from({...this.state.children});
        let service = new DataService();
        let data service.getAll();
        for(let i in data){
            // where data[i] = { boo: 'bye' }
            arr.push(<Child data={data[i].something} />);
        }
    }

    componentDidMount(){
        this.getData();
    }

    render(){
        return(
            {this.state.children}
        )
    }        
}

和Child.js：

class Child extends React.Component {
    constructor(props){
        this.state = props.data;
        this.baseState = {...props.data} // Cloned object 
    }

    handleChange(){
        // The point is change component's state but there is something weird
        this.setState({boo: 'hello'});

        console.log(this.state); // {boo: 'hello'}
        console.log(this.baseState); // {boo: 'hello'} --- why???
    }

    render(){
        return(
            <div onClick={() => this.handleChange()}>I'm a child!</div>
        )
    }
}

当我更改Child的状态时，baseState也将更改！我克隆了对象以避免这种行为，但是我不知道发生了什么。

感谢您的帮助！

Answer 1

解决了！

我的问题是从父母的道具上作一个浅表复制。我使用 lodash 库克隆对象并保留相同的属性：

import React from 'react';
import _ from 'lodash';    

class Child extends React.Component {
    constructor(props){
        this.state = props.data;
        this.baseState = _.cloneDeep(props.data); // Cloned object
    }
}

在React Component中保持基本状态

1 个答案: