Отправка реквизита или изменение состояния ребенка не обновляет рендер в ReactJs
Я новичок в React, так что если кто-нибудь может меня просветить. У меня родительский компонент и дочерний компонент. Я выполняю выборку данных по отцу, а затем передаю новый результат через реквизиты ребенку. Но ребенок не обновляется на рендере. {число остается прежним} Я знаю, что он работает, потому что я использовал console.info как в родительском, так и в дочернем, и значение идеальное, только рендеринг его не показывает.
Родительский компонент добавляет к дочернему элементу свойства qtd:
{this.state.products.map((item)=><div> <Card key = {item.id} id = {item.id} qtd = {item.qtd} title = {item.title} addCardCount = {this.addCardCount} subtractCardCount = {this.subtractCardCount} ref = {instance => { this.card = instance; }} /></div> )}
Затем, когда я добавляю это ребенку:
{ this.props.qtd }
На просмотре ничего не происходит.
Даже когда я изменяю дочернее состояние через родителя, представление остается прежним. Вы знаете, как это сделать лучше? Вы знаете возможные причины, по которым это не работает? Ценю вашу помощь.
Ответы 1
Попробуйте следующее:
В вашем дочернем компоненте:
class Child from React.Component {
componentDidUpdate(previousProps) {
if (previousProps !== this.props) {
this.forceUpdate()
}
}
render() {
return (<div>{this.props.qtd}</div>)
}
}
Вы также можете использовать setState () вместо forceUpdate () и сделать условную визуализацию с вашим значением состояния.
Очевидно, что React автоматически перерисовывает компонент при получении новых свойств. В этом весь смысл React.
@JJJ, ты абсолютно прав, перередактировал ответ. Только что произошла ошибка, так как сегодня у меня была аналогичная проблема, но из-за моей реализации, и я сразу подумал об этом, когда увидел это.
Я не знаю, то же самое, но использование функции componentWillReceiveProps также решило проблему. Мне нужно больше узнать о функциях этих компонентов. Спасибо!
@GuilhermeNunes Я опубликовал с использованием компонента disparate, потому что componentWillReceiveProps считается устаревшим кодом и его следует избегать в новом коде (хотя вы все еще можете его использовать) :)
Вам нужно показать более полный код (минимальный воспроизводимый пример).