如何将 object 添加到 React 组件的状态？

Question

我有 object={x:[],y:[],z:[]} 从 Api 得到并将其作为道具从 <Acomponent/> 传递给 child <Bcomponent/> 就像 <Acomponent data={object}/>.

<Bcomponent/> 状态为 {a:[],b:[],c:[]} 我想将来自 <Acomponent> 的数据道具添加到 <Bcomponent/>

的状态

（即）<Bcomponent/> 的最终状态必须是

{a:[],b:[],c:[],x:[],y:[],z:[]}

如何实现？

Answer 1

只需使用构造函数

class Bcomponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                a: [],
                b: [],
                c: [],
                x: props.data.x,
                y: props.data.y,
                z: props.data.z
            }
        }
        ...
    }

或 setState 在 componentWillReceiveProps

Answer 2

您可以使用对象展开语法来合并对象：

class Bcomponent extends React.Component {
    constructor(props) {
        super(props);

        const {data} = props;

        this.state = {
            a: [],
            b: [],
            c: [],
            ...data,
        }
    }

    // ...other functions
}

Answer 3

state = {
 a: [], b: [], c: [], ...this.props.data
};

演示https://codesandbox.io/s/q30w3q97r9

如何将 object 添加到 React 组件的状态？

How to add a object to state of react component?

reactjs

redux

react-redux

react-props