未捕獲的類型錯誤：無法分配給 object 的只讀屬性 '#<object> '<div id="text_translate"><p> 我不知道這段代碼有什么區別。 class a 是組件，示例是 example.js</p><pre> import React, {Component} from 'react'; const styles = { border: { display: 'inline-block', height: '19px', padding: '1px 8px 0', border: '2px solid', borderRadius: '12px', lineHeight: '20px', fontSize: '14px', verticalAlign: 'top', }, default: { display: 'inline-block', height: '20px', padding: '1px 10px 0', borderRadius: '10px', lineHeight: '21px', fontSize: '13px', verticalAlign: 'top', }, state: { display: 'inline-block', width: '14px', height: '13px', paddingTop: '1px', lineHeight: '14px', fontSize: '11px', color: '#fff', letterSpacing: '-0.5px', textAlign: 'center', verticalAlign: 'top', } }; class A extends Component { static defaultProps = { type: 'default', }; render() { const { label, style, type, ...other } = this.props; switch (type) { case 'border': elementStyle = styles.border; break; case 'default': elementStyle = styles.default; break; case 'state': elementStyle = styles.state; break; } return ( &lt;span style={Object.assign(elementStyle, style)} {...other}&gt;{label}&lt;/span&gt; ); } } export default A;</pre><p> 示例代碼是 example.js</p><pre> import A from './A'; export default class Example extends React.Component { render() { return ( &lt;div&gt; &lt;A style={{background: '#fe6969', color: '#fff'}} /&gt; &amp;nbsp; &lt;A style={{background: '#ff8137', color: '#fff'}} /&gt; &amp;nbsp; &lt;A style={{background: '#fcb400', color: '#fff'}} /&gt; &amp;nbsp; &lt;/div&gt; ); } }</pre><p> 此代碼錯誤是 Uncaught TypeError: Cannot assign to read only property 'background' of object '#'</p><p> 我使用 babel-loader 8、babel7、webpack4</p><p> 如果我更正 Object.assgin({}, elementStyle, style) 正在工作。 我認為重新渲染 A 組件時會發生此錯誤。 我不知道為什么這個錯誤...</p><p> 請幫我。</p></div></object>

Question

我不知道這段代碼有什么區別。 class a 是組件，示例是 example.js

import React, {Component} from 'react';

const styles = {
    border: {
        display: 'inline-block',
        height: '19px',
        padding: '1px 8px 0',
        border: '2px solid',
        borderRadius: '12px',
        lineHeight: '20px',
        fontSize: '14px',
        verticalAlign: 'top',
    },
    default: {
        display: 'inline-block',
        height: '20px',
        padding: '1px 10px 0',
        borderRadius: '10px',
        lineHeight: '21px',
        fontSize: '13px',
        verticalAlign: 'top',
    },
    state: {
        display: 'inline-block',
        width: '14px',
        height: '13px',
        paddingTop: '1px',
        lineHeight: '14px',
        fontSize: '11px',
        color: '#fff',
        letterSpacing: '-0.5px',
        textAlign: 'center',
        verticalAlign: 'top',
    }
};

class A extends Component {
    static defaultProps = {
        type: 'default',
    };

    render() {
        const {
            label,
            style,
            type,
            ...other
        } = this.props;


        switch (type) {

            case 'border':
                elementStyle = styles.border;
                break;
            case 'default':
                elementStyle = styles.default;
                break;
            case 'state':
                elementStyle = styles.state;
                break;
        }

        return (
            <span style={Object.assign(elementStyle, style)} {...other}>{label}</span>
        );
    }
}

export default A;

示例代碼是 example.js

import A from './A';

    export default class Example extends React.Component {
        render() {
            return (
                <div>
                    <A style={{background: '#fe6969', color: '#fff'}} /> &nbsp;
                    <A style={{background: '#ff8137', color: '#fff'}} /> &nbsp;
                    <A  style={{background: '#fcb400', color: '#fff'}} /> &nbsp;
                </div>
            );
        }
    }

此代碼錯誤是 Uncaught TypeError: Cannot assign to read only property 'background' of object '#'

我使用 babel-loader 8、babel7、webpack4

如果我更正 Object.assgin({}, elementStyle, style) 正在工作。 我認為重新渲染 A 組件時會發生此錯誤。 我不知道為什么這個錯誤...

請幫我。

Answer 1

所有你需要做的就是這樣的使用擴展CONCAT /合並兩個對象

{{...elementStyle, ...style}}  or

{Object.assign({}, elementStyle , style) }

您應該了解Object.assign的工作原理。 它返回目標對象作為其操作的返回值。

因此，在第一種語法中：

Object.assign({}, elementStyle , style)

您正在創建一個具有elementStyle和style的無數屬性的全新對象 。

如果您這樣做：

Object.assign(elementStyle, style)

然后elementStyle本身就是目標對象，因此將被突變，這將是從Object.assign返回的內容。

這是我的意思的例子。

范例1：

 // With no new target object const original = [{id:1}, {id:2}, {id:3}]; const newArray = original.map(elem => { return Object.assign(elem, {id:2}); }); console.log('Original object has changed'); console.log(original); //------------------------------ // With a new target object const original2 = [{id:1}, {id:2}, {id:3}]; const newArray2 = original2.map(elem => { return Object.assign({}, elem, {id:2}); }); console.log('Original object has not changed'); console.log(original2); 

范例2：

var styles =  {
  circle: {backgroundColor: 'yellow', height: '1005', width: '100%'},
  circleA: {backgroundColor: 'blue'},
};

因此，我們需要所有圓都具有默認的cir某些圓樣式，但是我們需要更改某些屬性，

// background yellow
<div style={styles.circle}></div>

// background  blue
<div style={Object.assign(styles.circle, styles.circleA)}></div>

// expeted background yellow, but it's blue. cus styles.circle still have it's merged value
<div style={styles.circle}></div>

該解決方案是一個空對象傳遞給Object.assign（）。 通過這樣做，您將告訴方法使用傳遞給它的對象來生成一個NEW對象 。

范例3：

 const obj1 = { name: "J" } const obj2 = { gander: "m" } // Here, obj1 is the same after the Object.assign call console.log(Object.assign({}, obj1, obj2)); console.log(obj1) console.log(obj2) console.log("without empty obj passed") // Note that after this call, obj1 holds both keys. So this will mutate it: console.log(Object.assign(obj1, obj2)); console.log(obj1) // This is different now console.log(obj2) 

就你而言

`<A propstyle={{background: '#fe6969', color: '#fff'}} />

<A propstyle={{background: '#ff8137', color: '#fff'}} /> ` 

component在Parent中定義了兩次，這意味着我們將得到兩個圓，子部件將渲染兩次。

並在子組件中定義如下：

<span style={Object.assign(elementStyle , style) }{...other}>{label}</span>

第一次渲染：

Object.assign從右到左道具覆蓋性style ，以elementStyle，這里elementStyle本身是目標對象，那會是什么，從Object.assign返回。

風格道具： { background: "#fe6969", color: "#fff" }

elementStyle： { background: "#fe6969", borderRadius: "10px", color: "#fff" }

第二個渲染：

Object.assign試圖覆蓋從右鍵屬性到左，但elementStyle有{ background: "#fe6969", borderRadius: "10px", color: "#fff" }

並且Object.assign仍然在循環中（請記住示例1 .map（））

風格道具： { background: "#ff8137", color: "#fff" }

會發生錯誤：“類型錯誤：無法分配給只讀屬性‘何時’對象的背景{Object.assign(elementStyle , style) } ，因為沒有新的目標對象。

請在此處找到完整的代碼

希望能幫助到你。 閱讀更多

Answer 2

Instead of assigning values directly to the object, clone the object first instead of mutating an object that is immutable due to the fact that the object is a props object or because Object.defineproperties was used to set writable to "false", but just clone object 並將值分配給克隆的 object 並使用克隆的 object，但將值正確分配給克隆的 ZA8CFDE6331BD59EB2ACZ6

而不是像這樣直接分配和變異：

object.field = value

做：

let clonedObject = {...object}
clonedObject = {...clonedObject , field: value}

否則，使用 object.defineproperties 將可寫屬性設置為“true”也可能是另一種可行的方法。

Object.defineProperty(object, 'field1', {
  value: 1,
  writable: true
});