Как обновить реквизиты дочернего компонента?
Если вы можете написать рекурсивную функцию в простой JS (или с комбинацией lodash), которая будет самой лучшей (по производительности), но если вы захотите пропустить рекурсию со своей стороны и хотите перейти на простой читаемый код ( которые могут быть не самыми лучшими по производительности), вы можете использовать lodash # cloneDeepWith для любых целей, в которых вы должны проходить рекурсивно.
let findValuesDeepByKey = (obj, key, res = []) => (
_.cloneDeepWith(obj, (v,k) => {k==key && res.push(v)}) && res
)
Итак, обратный вызов вы проходит, поскольку второй аргумент _.cloneDeepWith будет рекурсивно проходить все пары key/value рекурсивно, и все, что вам нужно сделать, это операция, которую вы хотите делать с каждым. приведенный выше код является всего лишь примером вашего дела. Вот рабочий пример:
var object = {
prop1: 'ABC1',
prop2: 'ABC2',
prop3: {
prop4: 'ABC3',
prop5Arr: [{
prop5: 'XYZ'
},
{
prop5: 'ABC4'
},
{
prop6: {
prop6NestedArr: [{
prop1: 'XYZ Nested Arr'
},
{
propFurtherNested: {key100: '100 Value'}
}
]
}
}
]
}
}
let findValuesDeepByKey = (obj, key, res = []) => (
_.cloneDeepWith(obj, (v,k) => {k==key && res.push(v)}) && res
)
console.log(findValuesDeepByKey(object, 'prop1'));
console.log(findValuesDeepByKey(object, 'prop5'));
console.log(findValuesDeepByKey(object, 'key100'));1 ответ
Что вам нужно, так это componentDidUpdate в компоненте SearchBar:
componentDidUpdate(prevProps) {
if (this.props.data !== prevProps.data) {
this.setState({data: this.props.data ,filteredData: this.props.data});
}
}
Лучшее решение - не хранить data как состояние в SearchBar, а получить доступ к нему напрямую из реквизита.