Фон
Я работаю над приложением Meteor, которое использует ReactJS в качестве библиотеки рендеринга.
В настоящее время у меня возникают проблемы с повторным использованием дочернего компонента.-отобразить, когда данные были обновлены, даже если родительский объект обращается к обновленным данным и предположительно передает их дочернему элементу.
Родительский компонент представляет собой таблицу данных.Дочерний компонент является полем даты, доступным для редактирования.
Принцип его работы (теоретически) : Родительский компонент передает существующие данные для даты в дочерний компонент в качестве реквизита.Дочерний компонент берет эти существующие реквизиты, обрабатывает их и устанавливает некоторые состояния, используя их, а затем имеет 2 варианта:
- по умолчанию: отображать данные
- , если пользователь нажимает на поле данных: изменить навводить и разрешать пользователю выбирать дату (с помощью response-datepicker), изменяя состояние - когда пользователь щелкает за пределами поля, запускает возврат только для отображения и сохраняет обновленные данные из состояния в базу данных
Я использую дочерний компонент дважды в строке в таблице, и каждый раз, когда он используется, ему требуется доступ к самым последним данным даты из базы данных.Таким образом, если данные изменяются в одном поле, второе поле должно отражать это изменение.
Проблема
Второе поле не отражаетизменения в базе данных, если я не обновлю страницу вручную и не заставлю дочерний компонент отображаться с новыми данными.Отредактированное поле - это , отражающее изменение данных, потому что оно отражает то, что хранится в состоянии.
После прочтения документации React, я уверен, что проблема в том, что дата появляется в качестве опоры,затем обрабатываются как состояние - и потому что компонент не будет перерисовываться после смены реквизита.
Мой вопрос
Что мне делать спочини это?
Все прочитанные мной документы настоятельно рекомендуют держаться подальше от таких вещей, как forceUpdate () и getDerivedStateFromProps (), но в результате я не уверен, как данные будут проходить через путь.что я хочу.
Мысли?
Мой код
Я немного сократил код и удалил имена переменных, специфичные для моегопроект, но я могу предоставить больше фактического, если это поможет.Я думаю, что мой вопрос более концептуален, чем просто отладка.
Родитель
ParentComponent () {
//Date comes as a prop from database subscription
var date1 = this.props.dates.date1
var date2 = this.props.dates.date2
return(
<ChildComponent
id='handle-date-1'
selected={[date1, date2]} />
<ChildComponent
id='handle-date-2'
selected={[date1, date2]} />
)
}
Ребенок
ChildComponent() {
constructor(props) {
super(props);
this.state = {
date1: this.props.selected[0],
date2: this.props.selected[1],
field: false,
};
}
handleDatePick() {
//Handles the event listeners for clicks in/out of the div, handles calling Meteor to update database.
}
renderDate1() {
return(
<div>
{this.state.field == false &&
<p onClick={this.handleClick}>{formatDate(this.state.date1)}</p>}
{this.state.field == true &&
<DatePicker
selected={this.state.date1}
startDate={this.state.date1}
onChange={this.handleDatePick}
/>
}
</div>
)
}
renderDate2() {
return(
<div>
{this.state.field == false &&
<p onClick={this.handleClick}>{formatDate(this.state.date2)}</p>}
{this.state.field == true &&
<DatePicker
selected={this.state.date2}
startDate={this.state.date2}
onChange={this.handleDatePick}
/>
}
</div>
)
}
render() {
return(
//conditionally calls renderDate1 OR renderDate2
)
}
}
(Если этот код / мое объяснение является грубым,это потому, что я все еще начинающий / низкоуровневый разработчик. У меня нет формального обучения, поэтому я учусь на работе, работая над довольно сложным приложением. Как одиночный разработчик. Это долгая история.нежный!)