Блог

Я получаю указанную выше ошибку на втором, из того, что выглядит как идентичные (для меня) фрагменты кода! Они оба используют стандартный пакет react-datepicker . Первый:

 <div>
    <label>Date Terminated</label>
    <div>
        <DateControl 
            value={this.state.edit_course.date_terminated || null}
            name="date_terminated_course"
            onChange={(e) => this.handleDetailChangeCourse("date_terminated", e.target.value)}
        />
    </div>
</div>
  

Второй:

 <div>
    <label>Date Terminated</label>
    <div>
        <DateControl 
            value={this.state.edit_prereq.date_terminated_prereq || null}
            name="date_terminated_prereq"
            onChange={(e) => this.handleDetailChangePrereqs("date_terminated", e.target.value)}
        />
    </div>
</div>
  

Как только выполняется вызов handleDetailChangePrereqs(), ошибка возникает во время рендеринга.

Две процедуры обработки выглядят следующим образом:

 handleDetailChangeCourse(prop, value) {
    if (prop === "date_terminated") {
        console.log(`date: ${value}`)
        console.log(typeof value)
        console.log(JSON.stringify(value))
    }
    const index = this.state.index
    const courses = this.state.temp_courses
    courses[index][prop] = value
    this.setState({ temp_courses: courses });
}

handleDetailChangePrereqs(prop, value) {
    if (prop === "date_terminated") {
        console.log(`date: ${value}`)
        console.log(typeof value)
        console.log(JSON.stringify(value))
    }
    const index = this.state.prereqIndex
    const prereqs = this.state.temp_prereqs
    prereqs[index][prop] = value
    this.setState(() => ({ temp_prereqs: prereqs }));
}
  

Когда я запускаю код и выбираю / ввожу дату для первого элемента управления handleDetailChangeCourse) (), он работает нормально и выдает следующее:

 date: 1608069600000
object
"2020-12-15T22:00:00.000Z"
  

Но когда я делаю то же самое для второго элемента управления handleDetailChangePrereqs(), он выдает ошибку после предоставления мне этого вывода:

 date1: 1608069600000
object
"2020-12-15T22:00:00.000Z"
  

Я понимаю сообщение об ошибке, и, прочитав множество решений на этом сайте, большинство из них обычно являются окончательными, они отображают объект, а не то, что они считали строкой.
Кажется, я визуализирую объект в обоих случаях, но первый работает.

Потратив много часов на вывод всей информации, я не понимаю, на что еще я могу посмотреть. В этой же программе есть другие вызовы DateControl, и они тоже работают нормально. Это второй, который также отображает свойство объекта .date_terminated, которое завершается с ошибкой (хотя в каждом случае это отдельный объект).

Компонент DateControl выглядит следующим образом:

 setDate(selected_date) {
    this.props.onChange({
        target: {
            name: this.props.name,
            value: selected_date
        }
    });
},

render() {
    return (
        <DatePicker
            disabled={this.props.readOnly}
            onBlur={this.props.onBlur}
            style={this.props.style}
            dateFormat="DD/MM/YYYY"
            locale="en-za"
            placeholderText={this.props.readOnly ? "" : "DD/MM/YYYY"}
            selected={this.props.value ? moment(this.props.value): null}
            onChange={(date) => { this.setDate(date) } }
        />
    );
}
  

Спасибо Шьяму и Вишалу за предложение создать песочницу. Я потратил немало времени на подготовку некоторого кода, чтобы сделать именно это, прежде чем увидеть, в чем была моя проблема!

Как я уже говорил в своем вопросе: «Я понимаю сообщение об ошибке, и, прочитав множество решений на этом сайте, большинство из них обычно являются окончательными, они отображают объект, а не то, что они считали строкой».

И я делал именно это.

Проблема была не в том, где я решил, что это было, прежде чем задавать этот вопрос, это было в другом месте:

 <table>
...
    <td>
        { item.date_terminated_prereq }
    </td>
...
</table>
  

Как видно из приведенного выше фрагмента кода, я фактически отображал измененную дату как часть таблицы. В момент его отображения я получил сообщение об ошибке.

Итак, урок, который я извлек из этого, заключается в том, что везде в StackOverflow я видел упоминание об этой проблеме, это было потому, что «объект» отображался случайно или неосознанно. Я должен был принять это добросовестно и искать это как проблему в моем коде, а не упрямо думать, что ошибка связана с <DateControl /> .

Примечание для рецензента: должен ли я просто удалить весь этот вопрос, поскольку мой ответ скорее философский, чем практический?