Соединение не изменяет реквизиты дочернего компонента, когда изменен объект проп

Question

Привет, у меня есть компонент Sample, обернутый с помощью connect, как

@connect(state => ({
    ....
    ....
}), {})
export default class Sample extends Component {
....
....
}

. Я импортирую Sample из другого компонента и передаю имя data как

....
data = {
a: 1,
b: 2
}

....
<Sample data={data} />

, после чего мой компонент отображаетсяс этими данными.

затем я добавляю новое значение ключа к data как

data = {
    a: 1,
    b: 2,
    c:3
    }

, тогда мой обернутый компонент никогда не получит обновленную пропу.Только Connect компонент получает обновленный реквизит.

, затем я изменил код, распространяя данные в новый объект и передавая дочерний компонент.тогда он работает отлично.

<Sample data={{ ...data }} />

что не так с первым методом?

Answer 1

Проблема не имеет ничего общего с connect.Я полагаю, что проблема здесь заключается в мутации, которую вы делаете с объектом data.

. В JavaScript мы знаем эту простую истину

y = { a: 1 }
x = y;
console.log(x === y); // true
x.b = 2;    
console.log(x === y); // true

Для запуска повторного рендеринга, Reactпросит вас предоставить новый объект, которого вы можете достичь одним из следующих способов:

newData = { ...data, c: 3 };

ИЛИ

newData = Object.assign({}, data, { c : 2 });

По сути, то же самое происходит, когда вы делаете

<Sample data={{ ...data }} />

Создает новый объект при каждом повторном рендеринге (даже если вы этого не хотите, поэтому не рекомендуется).