gpt4 book ai didi

reactjs - 未捕获的类型错误 : Cannot assign to read only property '' of object '#'
转载 作者:行者123 更新时间:2023-12-03 18:40:52 27 4
gpt4 key购买 nike

我不知道这段代码有什么区别。
类 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>
);
}
}

此代码错误是未捕获的类型错误:无法分配给对象“#”的只读属性“背景”

我使用 babel-loader 8、babel7、webpack4

如果我正确 Object.assgin({}, elementStyle, style) 正在工作。
我认为在重新渲染 A 组件时会发生此错误。
我不知道为什么这个错误...

请帮我。

最佳答案

您需要做的就是使用 spread 连接/合并两个这样的对象

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

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

您应该了解 Object.assign 的工作原理。它返回目标对象作为其操作的返回值。

所以,在第一个语法中:
Object.assign({}, elementStyle , style)

您正在使用 elementStyle 和样式 的可枚举属性创建一个 全新对象。

如果你这样做:
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'},
};

所以我们需要所有圆都有默认的圆某种圆样式,但我们需要改变一些属性,
// 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'}} /> `

组件 A 在 Parent 中定义了两次,这意味着我们将得到两个圆并且子组件将渲染两次。

在您定义的子组件中,如下所示:
<span style={Object.assign(elementStyle , style) }{...other}>{label}</span>

第一次渲染:

Object.assign 将属性从右到左的 props style 覆盖到 elementStyle,这里 elementStyle 本身就是目标对象,即 Object.assign 返回的内容。

样式 Prop :{ background: "#fe6969", color: "#fff" }
元素样式:{ background: "#fe6969", borderRadius: "10px", color: "#fff" }
第二次渲染:

Object.assign 尝试从右到左覆盖属性,但 elementStyle 有 { background: "#fe6969", borderRadius: "10px", color: "#fff" }
并且 Object.assign 仍在循环中(请记住示例 1 .map())

样式 Prop :{ background: "#ff8137", color: "#fff" }
抛出错误:'TypeError: {Object.assign(elementStyle , style) } 时无法分配对象的只读属性 'background',因为没有新的目标对象。

请找到完整的代码 here

希望能帮助到你。 read more

关于reactjs - 未捕获的类型错误 : Cannot assign to read only property '' of object '#<Object>' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54413909/

27 4 0