"JavaScript: Uncaught Invariant Violation: Objects are not valid as a React child" - 在两个相同日期输入中的第二个

Question

我第二次收到上述错误，（对我来说）代码片段看起来完全相同！他们都使用标准的 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 }));
}

当我运行代码和 select/enter 第一个控件 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) } }
        />
    );
}

Answer 1

感谢 Shyam 和 Vishal 建议我创建了一个沙箱。在看到我的问题出在哪里之前，我花了很多时间准备一些代码来做到这一点！

正如我在问题中所述：“我理解错误消息，并且在该站点上阅读了很多解决方案，其中大多数通常是最终的，他们正在渲染一个对象，而不是他们认为的字符串。”

我就是这么做的。

问题不在我问这个问题之前确定的地方，而是在其他地方：

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

从上面的代码段可以看出，我实际上是将更改的日期显示为 table 的一部分。它呈现的那一刻我收到了错误消息。

所以我从中学到的是，我在 Whosebug 上的任何地方都看到了这个问题的提及，这是因为 'object' 被意外或在不知不觉中显示。我本应该真诚地接受它并将其视为我的代码中的问题，而不是顽固地认为错误出在上。

审稿人注意事项： 我是否应该删除整个问题，因为我的回答比实际更哲学？

"JavaScript: Uncaught Invariant Violation: Objects are not valid as a React child" - 在两个相同日期输入中的第二个

"JavaScript: Uncaught Invariant Violation: Objects are not valid as a React child" - on second of two identical date inputs

javascript

node.js

reactjs

react-datepicker