Реакция: невозможно добавить свойство 'X', объект не расширяемый

Question

Я получаю реквизиты в моем компоненте. Я хочу добавить свойство 'LegendPosition' с реквизитом в этом компоненте. Я не могу этого сделать. Пожалуйста, помогите мне с этим. Я уже пробовал этот код, но безуспешно:

var tempProps     = this.props;
tempProps.legendPosition = 'right';
Object.preventExtensions(tempProps);

console.log(tempProps);

Answer 1

Я хочу отправить обновленный реквизит дочернему компоненту. Если это возможно без копирования или клонирования нового объекта, пожалуйста, помогите мне, как мне этого добиться.

Решение так же просто, как:

<ChildComponent {...this.props} legendPosition="right" />

Конечно, legendPosition будет доступно в ChildComponent по this.props.legendPosition.

Конечно, ранее this.props может содержать уже legendPosition свойство / значение, которое будет перезаписано определенным позже - порядок имеет значение .

Конечно, может быть много операторов распространения - для нескольких свойств, логических блоков ... что угодно:

const additonalProps = {
  legendPosition: 'right',
  sthElse: true
}
return (
  <ChildComponent {...this.props} {...additonalProps} />
)

Answer 2

реквизиты не являются изменяемыми, вы не можете ничего добавить к ним. если вы хотите «скопировать» их, вам нужно сделать

const tempProps = {...this.props};

И единственная причина, по которой я вижу, что вам нужно добавить больше реквизита, - это передать его ребенку, но вы можете сделать это, не добавляя его в объект реквизита.

РЕДАКТИРОВАТЬ: добавить реквизит с дополнительной опорой

<Component {...this.props} legendPosition="right" />

Answer 3

Вы не можете изменить this.props.Здесь tempProps является ссылкой this.props, поэтому он не работает.Вам следует создать копию props, используя JSON.parse() и JSON.stringify()

var tempProps = JSON.parse(JSON.stringify(this.props));
tempProps.legendPosition = 'right';
Object.preventExtensions(tempProps);

console.log(tempProps);

. Для лучшего и эффективного способа глубокого клонирования см. Какой самый эффективный способ глубокого клонированияобъект в JavaScript?

Answer 4

ниже в tempProps объекте spread оператор копирует ваш this.props объект и после spread оператора мы можем добавить новое свойство объекта или мы можем обновить существующее свойство объекта.

var tempProps = {
  ...this.props,
  tempProps.legendPosition = 'right' //property you want to add in props object
};

Answer 5

Ваш ответ в этой строке.

var tempProps = this.props;

this.props является неизменным, что означает, что вы не можете изменить значение свойства в функции. Вы можете использовать this.state, чтобы изменить его в своей функции

1. реквизит --- вы не можете изменить его значение.
2. состояния --- вы можете изменить его значение в вашем коде, но оно будет активным, когда рендер случается.