React - альтернатива componentWillReceiveProps
Я использую React с NextJS.
У меня есть компонент, который в основном представляет собой таблицу, которая дает некоторое резюме. В зависимости от выбора пользовательского интерфейса ожидается, что этот компонент покажет соответствующую сводку.
Приведенный ниже код отлично работает.
class Summary extends Component{
state = {
total: 0,
pass: 0,
fail: 0,
passp: 0,
failp: 0
}
componentWillReceiveProps(props){
let total = props.results.length;
let pass = props.results.filter(r => r.status == 'pass').length;
let fail = total - pass;
let passp = (pass/(total || 1) *100).toFixed(2);
let failp = (fail/(total || 1) *100).toFixed(2);
this.setState({total, pass, fail, passp, failp});
}
render() {
return(
<Table color = "teal" >
<Table.Header>
<Table.Row textAlign = "center">
<Table.HeaderCell>TOTAL</Table.HeaderCell>
<Table.HeaderCell>PASS</Table.HeaderCell>
<Table.HeaderCell>FAIL</Table.HeaderCell>
<Table.HeaderCell>PASS %</Table.HeaderCell>
<Table.HeaderCell>FAIL %</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row textAlign = "center">
<Table.Cell>{this.state.total}</Table.Cell>
<Table.Cell >{this.state.pass}</Table.Cell>
<Table.Cell >{this.state.fail}</Table.Cell>
<Table.Cell >{this.state.passp}</Table.Cell>
<Table.Cell >{this.state.failp}</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
);
}
}
Похоже, что componentWillReceiveProps больше не поддерживается. Я пробовал другие варианты, такие как shouldComponentUpdate и т. д., Все они приводят к бесконечному циклу. Как лучше всего обновить состояние из реквизита для повторного рендеринга этого компонента?
@RIYAJKHAN, как я уже сказал, он устарел. Также этот компонент работает нормально. Ищу альтернативу
@DenisTsoi getDerivedStateFromProps является статическим. я не могу вызвать setState
вы можете просмотреть ответ ниже, чтобы узнать, как установить состояние с помощью getDerivedState -
Ответы 1
Из реакции блог, 16.3 представила уведомления об устаревании для componentWillRecieveProps.
В качестве обходного пути вы можете использовать метод
static getDerivedStateFromProps(nextProps, prevState)
следовательно
componentWillReceiveProps(props){
let total = props.results.length;
let pass = props.results.filter(r => r.status == 'pass').length;
let fail = total - pass;
let passp = (pass/(total || 1) *100).toFixed(2);
let failp = (fail/(total || 1) *100).toFixed(2);
this.setState({total, pass, fail, passp, failp});
}
становится
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.total !== prevState.total) {
return ({ total: nextProps.total }) // <- this is setState equivalent
}
return null
}
Рекомендация от React - использовать componentDidUpdate вместо getDerivedStateFromProps, если вам нужно выполнить побочный эффект (например, выборку данных или анимацию) в ответ на изменение свойств. reactjs.org/docs/…, reactjs.org/blog/2018/03/27/…
@ user1912383 Нет необходимости использовать componentDidUpdate, это зависит от конкретного случая, реагируйте также рекомендую альтернативу getDerivedStateFromProps: reactjs.org/blog/2018/06/07/…
и добавьте: else return null
Да, если забыть об остальном, это вызовет некоторые ошибки
как установить состояние внутри метода getDerivedStateFromProps, если он асинхронный
componentWillReceiveProps будет устаревшим? Вы используете React17? В приведенном выше скрипте нет кода, который вызывает бесконечный цикл