Как использовать getDerivedStatefromProps в моем компоненте
Компонент получает список объектов в качестве реквизита. Я хочу отобразить его с бесконечной прокруткой. Он имеет состояние «curNum», которое представляет собой текущее количество отображаемых элементов. «curNum» изменяется при прокрутке вниз, поэтому список элементов нарезается на основе «curNum».
Список объектов будет обновлен родительским компонентом, а "curNum" должен быть сброшен до начального значения.
С componentWillReceiveProps я могу сделать:
componentWillReceiveProps(newProps) {
this.setState({
curNum: initNum,
});
}
но как я могу переписать его с помощью getDerivedStateFromProps? Я читал, что новый метод сработает, даже если состояние изменится. Итак, как я могу узнать, что получаю новый реквизит?
Должен ли я зеркалировать копию списка в состояние, а затем глубоко проверять, каждый раз ли список объектов равен?
@KenoClayton, componentDidUpdate должен обрабатывать побочные эффекты, а не обновлять состояние
Вы правы, моя ошибка ??
Ответы 1
Есть несколько способов, которые вы можете использовать для обновления состояния при изменении реквизита.
- Используйте getDerivedStateFromProps: обратите внимание, что предлагается максимально избегать использования этого метода, поскольку он вызывается при каждом обновлении и начальном рендеринге, а не только при повторном рендеринге родительского компонента или изменении реквизита. Однако, если вы хотите его использовать, вам также нужно сохранить prevState
Код:
static getDerivedStateFromProps(props, state) {
if (state.prevCurNum !== props.initNum) {
return {
currNum: props.initNum,
prevCurNum: props.initNum
}
} else {
return { prevCurNum: props.initNum }
}
}
- Назначьте состояние из реквизита в конструкторе и управляйте ключевыми реквизитами для компонента
код
<MyComponent key = {this.state.initNum} initNum = {this.state.initNum} />
и в MyComponent
constructor(props) {
super(props);
this.state= {
currNum: props.initNum
}
}
В приведенном выше примере, если реквизит initNum изменится, ключ к компоненту изменится, и это приведет к повторному монтированию компонента с вызовом его конструктора.
- Третий способ — использовать мемоизацию при рендеринге, но он наиболее полезен, когда состояние получается в результате сложного вычисления свойств и не должно изменяться локально.
initNum никогда не меняется. Это константа. Я хочу, чтобы curNum сбрасывался, если реквизит был изменен
@assiegee, приведенный выше пример просто для демонстрации. какие бы реквизиты не менялись, вы можете их использовать
Спасибо, но ваш вариант 2 больше не будет применяться, верно? Я все еще ломаю голову над вариантом 1
@assiegee, ваш родитель, должно быть, передает ребенку какую-то опору, которая позволяет его повторно отображать, верно? или же из-за некоторого изменения в родительском элементе он повторно отображает, вызывая повторный рендеринг дочернего элемента, поэтому вы можете создать ключевую опору на основе этого изменения.
Как я уже сказал, я передаю массив объектов в качестве реквизита. Я действительно не думаю, что вариант 1 сработает ... Поскольку он никогда не попадет в первое условие, если initNum никогда не изменится @shubham
Я не могу передать список объектов в качестве ключа, верно?
Вы не можете. но вы можете создать ключ, указав его в строке
Вместо этого вы можете попробовать использовать
componentDidUpdate.