Говорит, что у меня есть редуктор, который изменил статус моей работы с "ожидает" на "одобрить",
как использовать его без использования устаревшего componentWillRecieiveProps?
Я делал это раньше
componentWillRecieiveProps(prevProps, nextProps) {
if (prevProps.job.status !== nextProps.job.status && nextProps.job.state === 'approved') {
this.props.history.replace('somewhere')
}
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Комментарий @Shishir Anshuman правильный, вы должны использовать getDerivedStateFromProps, но не очень очевидно, как это сделать, поэтому я собираюсь показать вам.
Это ваш исходный фрагмент, который сравнивает prevProps с nextProps:
componentWillRecieiveProps(prevProps, nextProps) {
if (prevProps.job.status !== nextProps.job.status && nextProps.job.state === 'approved') {
this.props.history.replace('somewhere')
}
}
Это должно выглядеть примерно так:
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.job.status !== nextProps.job.status && nextProps.job.state === 'approved') {
// return new object to update state
}
return null;
}
Это основано на предположении, что вы храните job.status в локальном состоянии, поэтому конструкция вашего компонента должна выглядеть примерно так:
constructor(props) {
super(props);
this.state = {
job: props.job,
};
}
Хотя у меня нет полной видимости вашей структуры данных, я бы, вероятно, сохранил job.status в локальном состоянии как логическое значение с именем jobStatus, а затем опрашивал бы объект this.props.job в моем рендере только тогда, когда this.state.jobStatus истинно.
Если вы это сделаете, ваш getDerivedStateFromProps будет выглядеть так:
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.jobStatus !== nextProps.job.status && nextProps.job.state === 'approved') {
// return new object to update state
}
return null;
}
Редактировать 1
Как отметил @Patrick Hund в комментариях, я пропустил ключевое слово static перед методом getDerivedStateFromProps, это необходимо.
Редактировать 2
Как правильно указывает @markerikson в комментарии ниже, getDerivedStateFromProps должен быть чистой функцией и не иметь побочных эффектов, я обновил фрагменты, чтобы отразить это.
Это важное предложение из документов, которые я не изучил полностью:
It should return an object to update state, or null to indicate that
the new props do not require any state updates.
хороший ответ, но я думаю, что не хватает одного: согласно документации, getDerivedStateFromProps должен быть статическим методом
Это плохая идея. getDerivedStateFromPropsдолжен является чистой функцией, а нет имеет какие-либо побочные эффекты. Запуск изменения URL-адреса абсолютно квалифицируется как побочный эффект. Правильное место для этой логики - componentDidUpdate().
Вы можете использовать getDerivedStateFromProps.